ng-options选择列表值设置为我选择的id并使用ng-model正确绑定它

Arn*_*501 5 javascript selectlist angularjs angularjs-ng-options

使用angular我想创建一个选择列表,其值带有我选择的id(对象的实际id属性),我想用ng-model指令正确绑定它.

这是我尝试过的:

<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;
}
Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/b7dyadnr/

这里选择选项值是正确的值(值是人的人的id),文本是正确的.但绑定不起作用,所以如果我设置$ scope.selectedPersonId的值,选择不会反映在列表中.

我知道我可以让它像这样工作:

<select ng-model="selectedPersonId"                 
ng-options="p.id as p.name for p in People"></select>
Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/rgtbn2f5/

它工作我可以设置$ scope.selectedPersonId,更改将反映在列表中.但是,选择列表选项值中使用的id不是实际人员的id!

<option value="0">Fred</option> <!--option value is 0 which is not the true id of fred -->
<option value="1" selected="selected">Joe</option>
...
Run Code Online (Sandbox Code Playgroud)

我希望像这样使用它,除了我希望angular在select选项值中使用person的真实id而不是数组的索引或它使用的任何东西.

如果你想知道我为什么要这样使用它是因为id被发送到API并且模型也可以使用querystring设置,所以我必须让它像这样工作.

2oo*_*oom 7

回来时有同样的问题.并且它似乎p.id只能在一个地方select或在里面工作trackexpr.它对我有用的唯一方法(值设置为id)是这样的:

<select 
ng-model="selectedPerson"                 
ng-options="p as p.name for p in People track by p.id"></select>
Run Code Online (Sandbox Code Playgroud)

虽然选择人的代码id = 1看起来很难看:

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

这是jsfiddle.

这是因为您必须为ng-model分配ng-options集合中的相同项目,因为它们是通过引用进行比较的.这来自角度文档:

注意:ngModel按引用进行比较,而不是值.绑定到对象数组时这很重要.请参阅此jsfiddle中的示例.

所以我最终放弃了,让Angular将选项值设置为它需要的任何值,因为它允许我将assignemnet设为simeple: $scope.selectedPersonId = 1