为什么我不能在AngularJs中双向绑定数组索引到模型?

Why can't I two-way bind array index to a model in AngularJs?

本文关键字：数组 绑定 索引 模型 不能 AngularJs 为什么      更新时间：2023-09-26

我试图做什么似乎是这样一个简单的事情:我有一个字符串值的数组，我想绑定到一个select的option s，并将所选值的索引绑定到一个变量。但无论是使用ng-options还是常规options与ng-repeat似乎都不能完全工作。一旦开始选择值，后者就可以工作，但不绑定到页面加载时的值集。

下面是Codepen对这个问题的说明。http://codepen.io/modo_lv/pen/xGYQjM(点击"View Compiled"查看纯HTML和JavaScript)。注意，这两个下拉框一开始都是空的，尽管它们绑定的值已经设置好了。并且在第一个下拉列表中选择任何内容都会导致该值变为未设置

你不能绑定它，因为$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

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

…无论是使用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

相关文章：