ng-model绑定不会更新同一对象上的另一个ng-model
[英]ng-model binding not updates another ng-model on the same object
问题描述
I have this code 
我有这个代码
http://plnkr.co/edit/aycnNVoD96UMbsC7rFmg?p=preview 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>
When i change value of name[0] in the first input box it changes values of the second input box. 当我在第一个输入框中更改name [0]的值时，它将更改第二个输入框中的值。 But when i change value of name[0] in the second input box it does not change value of the first input box. 但是，当我在第二个输入框中更改name [0]的值时，它不会更改第一个输入框的值。 Why? 为什么？
4 个解决方案
解决方案1
2 2015-02-26 11:27:55
如果您将第二个输入绑定到：names [$ index]
<input type="text" ng-model="names[$index]"> {{ name }}
解决方案2
1 2015-02-26 11:26:03
You need to provide
$indexin your ng-model.$index。
<li data-ng-repeat="name in names">
<input type="text" ng-model="names[$index]"> {{ name }}
</li>
You are binding ng-model="names[0]" . 您正在绑定ng-model="names[0]" 。 So it means that you are binding value on first index of names array. 因此，这意味着您要在names数组的第一个索引上绑定值。
So when we write ng-model="names[$index]" in ng-repeat it means that all values will be bound accordingly into array. 因此，当我们在ng-repeat编写ng-model="names[$index]"时，意味着所有值都将相应地绑定到数组中。 $index is an iterator offset of the repeated element. $index是重复元素的迭代器偏移量。
names[0] = 'One'
names[1] = 'Two'
and so on! 等等！
解决方案3
1 已采纳 2015-02-26 11:26:24
This is due to ng-repeat creating a child scope, so the reference to name inside the ng-repeat is different to that original one in the names array, see here : 这是由于ng-repeat创建了一个子作用域，因此ng-repeat对name的引用与names数组中的原始引用不同，请参见此处 ：
New AngularJS developers often do not realize that ng-repeat, ng-switch, ng-view and ng-include all create new child scopes, so the problem often shows up when these directives are involved.
Regarding as to why this happens, when you bind the input to name in names inside the ng-repeat , you are creating a new property on the new child scope created by the ng-repeat called name , and thus the ng-model of the textbox created by the ng-repeat is referencing a different name to that of the actual 0th element of the names array. 至于为何出现这种情况，当你绑定输入名字在里面的名字ng-repeat ，要创建由创建的新子范围的新属性ng-repeat所谓的name ，因此ng-model的ng-repeat创建的文本框引用的名称与names数组的实际第0个元素的名称不同。 As others have pointed out, if you use names[$index] you are implicitly referencing the 0th element of the names array, thus NOT creating a new name property on the child scope created by the ng-repeat . 就像其他人指出的那样，如果使用names[$index] ，则隐式引用了names数组的第0个元素，因此不会在ng-repeat创建的子作用域上创建新的name属性。 An angular best practice is not to have ng-models bound to primitives, rather objects, Sandy has mentioned in his answer if you bind to an object you will overcome this, and the 2 other posters have answered this by using $index to refer to the 0th element of the names array. 一个有角度的最佳实践是不要将ng模型绑定到图元，而是绑定到对象，Sandy在他的回答中提到，如果绑定到对象，您将克服这一问题，另外2个发布者通过使用$index引用来回答此问题。名称数组的第0个元素。 This is one of the nucances of scope inheritance in angular . 这是angular中作用域继承的微妙之处之一 。
A couple more handy links: 几个方便的链接：
解决方案4
1 2015-02-26 11:38:11
Just wanted to give my bit on this. 只是想给我一点点。 Somewhat related to your problem as I see. 我认为与您的问题有关。
<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>
Instead of binding the array item directly to the control, I would prefer to create an object of the array and then bind value of each item. 与其直接将数组项绑定到控件，不如创建数组的对象，然后绑定每个项的值。 This way we can avoid reference problems. 这样我们可以避免参考问题。
A working prototype jsfiddle 工作原型jsfiddle
Hope it helps. 希望能帮助到你。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.