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)
这里选择选项值是正确的值(值是人的人的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)
它工作我可以设置$ 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设置,所以我必须让它像这样工作.
回来时有同样的问题.并且它似乎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
| 归档时间: |
|
| 查看次数: |
6188 次 |
| 最近记录: |