为什么我不能将数组索引双向绑定到 AngularJs 中的模型？答案

【问题标题】：Why can't I two-way bind array index to a model in AngularJs?为什么我不能将数组索引双向绑定到 AngularJs 中的模型？
【发布时间】：2015-07-18 18:35:40
【问题描述】：

我正在尝试做一件看似简单的事情：我有一个字符串值数组，我想将其绑定到 select 的 options 并将所选值的索引绑定到多变的。但无论是使用ng-options 还是常规的options 和ng-repeat 似乎都不能完全正常工作。后者在您开始选择值后起作用，但不会绑定到页面加载时设置的值。

这是一个说明问题的 Codepen。 http://codepen.io/modo_lv/pen/xGYQjM（点击“查看编译”查看纯 HTML 和 JavaScript）。请注意，两个下拉菜单起初都是空的，即使它们绑定的值已经设置。在第一个下拉列表中选择任何内容都会导致该值变为未设置。

【问题讨论】：

标签： javascript angularjs data-binding

【解决方案1】：

你不能绑定它，因为 $index 没有为 ngOptions 定义，它只是 ngRepeat 的东西。如果想知道期权的指数，可以用Array.prototype.indexOf方法计算：

<select ng-model="testModel" 
        ng-options="labels.indexOf(label) as label for label in labels">
</select>

演示： http://codepen.io/anon/pen/MwBXBx

【讨论】：

我明白了。谢谢你。您是否也有任何想法，为什么使用带有 ng-repeat 的选项（确实有 $index）似乎只在第一次选择更改时绑定（我的 codepen 中的第二个示例）？
因为 ngRepeat 甚至不应该与绑定模型一起使用。这与使用 ngOptions 不同。可能它与 ngRepeat 为每个项目创建的子范围有关。你可以像这样<option ng-repeat="label in labels" value="{{$index}}">{{label}}</option> 排序六个，但仍然不推荐。
谢谢你，我明白这有什么意义。

【解决方案2】：

我有一个字符串值数组，我想将其绑定到一个选择的选项并将所选值的索引绑定到变量...

...似乎既不使用 ng-options 也不使用带有 ng-repeat 的常规选项完全工作。

ng-options 不起作用，因为您正尝试将$index 与它一起使用（仅适用于ng-repeat）。要使您的代码与 ng-option 一起使用，您需要替换

ng-options="$index as label for label in labels"

与

ng-options="labels.indexOf(label) as label for label in labels"

其次，ng-repeat 不起作用，因为您在 ng-value 上使用了 $index，但 ng-model 中的值没有与之关联的索引。

要使您的代码与ng-repeat 一起使用，您只需在<option> 中使用ng-selected，如下所示：

  <option  ng-repeat="label in labels" ng-selected = "{{label == testVal}}"  ng-value="$index">
    {{label}}
  </option>

这是更新后的plunkr

【讨论】：