javascript - ng-options select list value set to the id of my choice and binding it correctly with ng-model - Stack Overflow

admin管理员组

文章数量:1313347

With angular I would like to make a select list with value that takes the id of my choice (actual id property of an object) and I would like to bind it correctly with ng-model directive.

Here is what I've tried :

<select ng-model="selectedPersonId"                 
ng-options="p.id as p.name for p in People track by p.id"></select>

$scope.People = [
    { name : "Fred", id : 1 },
    { name : "Joe", id : 2 },
    { name : "Sandra", id : 3 },
    { name : "Kacey", id : 4 },
    { name : "Bart", id : 5 }
];

$scope.setTo1 = function(){
    $scope.selectedPersonId = 1;
}

/

Here select option value is the correct value (value is the id of person in people) and text is correct. But the binding doesn't work so if I set the value of $scope.selectedPersonId the selection is not reflected on the list.

I know I can make it work like this :

<select ng-model="selectedPersonId"                 
ng-options="p.id as p.name for p in People"></select>

/

There it works I can set $scope.selectedPersonId and the changes are reflected on the list. But then the id used in the select list option value is not the id of the actual person !

<option value="0">Fred</option> <!--option value is 0 which is not the true id of fred -->
<option value="1" selected="selected">Joe</option>
...

I want to use it like this except that I want angular to use the true id of the person in the select option value and not the index of the array or whatever thing it uses.

If you wonder why I want to use it like this it is because the id is sent to an API and the model can also be set using querystring so I must make it work like this.

With angular I would like to make a select list with value that takes the id of my choice (actual id property of an object) and I would like to bind it correctly with ng-model directive.

Here is what I've tried :

<select ng-model="selectedPersonId"                 
ng-options="p.id as p.name for p in People track by p.id"></select>

$scope.People = [
    { name : "Fred", id : 1 },
    { name : "Joe", id : 2 },
    { name : "Sandra", id : 3 },
    { name : "Kacey", id : 4 },
    { name : "Bart", id : 5 }
];

$scope.setTo1 = function(){
    $scope.selectedPersonId = 1;
}

http://jsfiddle/b7dyadnr/

Here select option value is the correct value (value is the id of person in people) and text is correct. But the binding doesn't work so if I set the value of $scope.selectedPersonId the selection is not reflected on the list.

I know I can make it work like this :

<select ng-model="selectedPersonId"                 
ng-options="p.id as p.name for p in People"></select>

http://jsfiddle/rgtbn2f5/

There it works I can set $scope.selectedPersonId and the changes are reflected on the list. But then the id used in the select list option value is not the id of the actual person !

<option value="0">Fred</option> <!--option value is 0 which is not the true id of fred -->
<option value="1" selected="selected">Joe</option>
...

I want to use it like this except that I want angular to use the true id of the person in the select option value and not the index of the array or whatever thing it uses.

If you wonder why I want to use it like this it is because the id is sent to an API and the model can also be set using querystring so I must make it work like this.

• javascript
• angularjs
• selectlist
• angularjs-ng-options

Share Improve this question Follow edited Sep 17, 2014 at 7:39 Arno 2501 asked Sep 17, 2014 at 6:50 Arno 2501Arno 2501 9,42799 gold badges3838 silver badges5656 bronze badges 5

• Your second example is using the id of the person, not the $index. It is working as it should. Fred has an id of 1. – Michael Kang Commented Sep 17, 2014 at 7:13
• @pixelbits no it's not the option value of fred is 0 not 1. It's working as long as I dont send or use the option value of the select list. – Arno 2501 Commented Sep 17, 2014 at 7:29
• I'm confused, the option value of Fred is clearly 1 from your post and in the demo fiddle – Michael Kang Commented Sep 17, 2014 at 7:31
• Inspect html code and tell me what you see in option value in the second example : jsfiddle/rgtbn2f5 – Arno 2501 Commented Sep 17, 2014 at 7:34
• Oh I see, I understand now. Good question:) I could see how track by would be useful here – Michael Kang Commented Sep 17, 2014 at 7:39

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Had the same issue while back. And it appears that p.id will only work in one place either in select or in trackexpr. The only way it worked for me (value was set to id) was like this:

<select 
ng-model="selectedPerson"                 
ng-options="p as p.name for p in People track by p.id"></select>

Though the code for selecting person with id = 1 would look pretty ugly:

$scope.setTo1 = function () {
    $scope.selectedPerson = $scope.People.filter(function (item) {
        return item.id == 1
    })[0];
}

Here is jsfiddle.

This is because you have to assign ng-model the same item you have in ng-options collection since they are pared by reference. This is from angular documentation:

Note: ngModel pares by reference, not value. This is important when binding to an array of objects. See an example in this jsfiddle.

So I gave up eventually and let Angular to set option value to whatever it needs since it would allow me to make assignemnet as simeple as: $scope.selectedPersonId = 1

本文标签：