Question

我有这段代码

http://plnkr.co/edit/aycnNVoD96UMbsC7rFmg?p=preview

<div data-ng-app="" data-ng-init="names=['One']">

<input type="text" ng-model="names[0]">

  <p>Looping with ng-repeat:</p>
  <ul>
    <li data-ng-repeat="name in names">
      <input type="text" ng-model="name"> {{ name }}
    </li>
  </ul>

</div>

当我在第一个输入框中更改名称[0]的值时，它会更改第二个输入框的值。但是当我在第二个输入框中更改name [0]的值时，它不会更改第一个输入框的值。为什么呢？

Answer 1

如果将第二个输入绑定到：names [$ index]

，它会起作用

<input type="text" ng-model="names[$index]"> {{ name }}

Answer 2

您需要在您的ng模型中提供 $index。

<li data-ng-repeat="name in names">
    <input type="text" ng-model="names[$index]"> {{ name }}
</li>

您正在约束ng-model="names[0]"。因此，这意味着您对names数组的第一个索引具有约束力。

因此，当我们在ng-model="names[$index]"中编写ng-repeat时，意味着所有值都将相应地绑定到数组中。 $index是重复元素的迭代器偏移量。

names[0] = 'One'
names[1] = 'Two'

等等！

Answer 3

这是由于ng-repeat创建了子范围，因此ng-repeat内的名称引用与名称数组中的原始引用不同，请参阅here：

新的AngularJS开发人员通常没有意识到ng-repeat， ng-switch，ng-view和ng-include都创建了新的子范围，所以当涉及这些指令时，问题经常出现。（见这个快速说明问题的示例。）

关于为什么会发生这种情况，当您将输入绑定到ng-repeat内的名称中的名称时，您将在由名为{{1}的ng-repeat创建的新子范围上创建新属性因此，ng-repeat创建的文本框的name引用了与names数组的实际第0个元素不同的名称。正如其他人所指出的那样，如果您使用ng-model，则隐含地引用names[$index]数组的第0个元素，因此 NOT 创建新名称names创建的子范围上的属性。一个有角度的最佳实践不是让ng模型绑定到基元，而是绑定对象，Sandy在他的回答中提到如果你绑定到一个对象就会克服这个问题，另外两个海报通过使用ng-repeat来解决这个问题。引用names数组的第0个元素。这是the nucances of scope inheritance in angular之一。

一些更方便的链接：

Here和here。

Answer 4

我想对此有所了解。与我看到的问题有些相关。

<body>
<div data-ng-app="" data-ng-init="names=[{value:'One'}, {value:'Two'}]">
  <p>Looping with ng-repeat:</p>
  <ul>
    <li data-ng-repeat="name in names">
      <input type="text" ng-model="name.value"> {{ name }}
    </li>
  </ul>
</div>
</body>

我宁愿创建数组的对象，然后绑定每个项的值，而不是将数组项直接绑定到控件。这样我们就可以避免参考问题了。

工作原型jsfiddle

希望它有所帮助。

ng-model绑定不会更新同一对象上的另一个ng-model

4 个答案: