Pre select an item in select box in angularJs?

Question

I want to make an item is pre selected in my selectbox,how it is possible in angularjs my code is given below

<select  ng-model="selectedClient"  ng-init="client.id == 117" ng-options="client.name for client in 
                         clients" class="form-control"></select>

I want to make item 117 as preselected but it is not working.

it should be ng-options="client.id as client.name for client in clients" — Pankaj Parkar
– Pankaj Parkar, Commented Mar 11, 2015 at 13:09

okanozeren · Accepted Answer · 2015-03-11 13:23:10Z

1

Do not think AngularJS models as only values or ids if you have Arrays filled up objects. You have to approach it as object in this situation.

If you have an array like this:

var clients = [{
    id: 1,
    name: "Client 1",
    active: false
}, {
    id: 2,
    name: "Client 2",
    active: false
}, {
    id: 3,
    name: "Client 3",
    active: false
}];

You can preselect one of them like below:

$scope.selectedClient = clients[0];

Keep in mind that the selectedClient is an object.

answered Mar 11, 2015 at 13:23

okanozeren

5554 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

gsk Over a year ago

here clients[0] means first item from clients,rite? In my case I am not sure in which item should be select? I have 'Id' value,can I select by using id value?

okanozeren Over a year ago

You have to find proper object which has the id value that you have. I use findWhere method of the underscorejs.org for my that like needs. For example: $scope.selectedClient = _.findWhere(clients, {id: 1});

gsk Over a year ago

returning undefined :(

Arun P Johny · Accepted Answer · 2015-03-11 13:10:56Z

1

You assign the selected item to the model object selectedClient

$scope.selectedClient = $scope.clients[1]

Demo: Fiddle

answered Mar 11, 2015 at 13:10

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

3 Comments

gsk Over a year ago

I want to select based on condition

Arun P Johny Over a year ago

@ShihabudheenMuhammed yes... based on the condition you assign the object to selectedClient

gsk Over a year ago

Thank you for the answer,now it is working but the problem is now value of selectedClient is integer rather than object. I want to object there.. :(

Pankaj Parkar · Accepted Answer · 2015-03-11 13:37:52Z

0

Your mark up should look like below.

HTML

<select  ng-model="selectedClient" ng-options="client.id as client.name for client in clients" 
class="form-control" ng-init="selectedClient = 117"></select>

edited Mar 11, 2015 at 13:37

answered Mar 11, 2015 at 13:12

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

1 Comment

gsk Over a year ago

when using client_id as it returns client_id,I want to client object,how it is possible?

Collectives™ on Stack Overflow

Pre select an item in select box in angularJs?

3 Answers 3

3 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related