ngOptions为值创建奇怪的结果

时间:2015-10-21 07:01:57

标签: javascript angularjs

我有以下选择元素。

<select ng-model="current_addon_ids" 
    ng-options="addon.id as addon.name for addon in addons"></select>

相关的$ scope变量在开头具有以下值。

$scope.addons = [{id: 701, name: "Item1"},{id: 702, name: "Item2"}];
$scope.current_addon_ids = [];

我希望select元素具有以下选项:

<option value="701">Item1</option>
<option value="702">Item2</option>

然而,我得到的是:

<option value="number:701">Item1</option>
<option value="number:702">Item2</option>

为什么要在ID中添加“number:”?我怎么让它停下来?

3 个答案:

答案 0 :(得分:3)

ngOptions指令的处理方式发生了变化。 migration notes for AngularJS 1.4简要介绍了此更改。有关更改的更详细说明,请参阅commit message

使用ngOptions时:该指令将代理键应用为元素的值。此提交更改用作代理键的实际字符串。我们现在存储一个字符串,该字符串通过在options集合中的项目上调用hashKey来计算;以前它是集合中项目的索引或键。

<select ng-model="current_addon_ids" 
    ng-options="addon.id as addon.label for addon in addons track by addon.id"></select>

答案 1 :(得分:2)

这是由于角度内部添加类型标识符以避免迭代期间可能的重复而发生的。如果您确定不会有重复项,则可以使用track by选项对此进行更正。

例如:

<select ng-model="current_addon_ids" 
ng-options="addon.id as addon.name for addon in addons track by addon.id"></select>

输出:

<option label="Item1" value="701">Item1</option>
<option label="Item2" value="702">Item2</option>

答案 2 :(得分:1)

使用track by item.id,如果您的收藏品具有ID属性,则可以按item.id进行跟踪。

参考:https://docs.angularjs.org/api/ng/directive/ngOptions

<select ng-model="current_addon_ids" 
    ng-options="addon.name for addon in addons track by addon.id"></select>

https://jsfiddle.net/z2cnjn4c/