Javascript ng模型绑定不会更新同一对象上的另一个ng模型
我有这个密码Javascript ng模型绑定不会更新同一对象上的另一个ng模型,javascript,angularjs,Javascript,Angularjs,我有这个密码 使用ng重复循环: {{name}} 当我在第一个输入框中更改名称[0]的值时,它会更改第二个输入框的值。 但当我在第二个输入框中更改名称[0]的值时,它不会更改第一个输入框的值。为什么? 您需要在ng模型中提供$index 等等 您需要在ng模型中提供$index 等等 这是由于ng repeat创建了一个子作用域,因此ng repeat中对名称的引用与名称数组中的原始名称不同,请参见: 新的AngularJS开发人员通常没有意识到ng重复, ng开关、ng视图和n
使用ng重复循环:
-
{{name}}
当我在第一个输入框中更改名称[0]的值时,它会更改第二个输入框的值。
但当我在第二个输入框中更改名称[0]的值时,它不会更改第一个输入框的值。为什么?
您需要在ng模型中提供$index
等等
您需要在ng模型中提供$index
等等 这是由于
ng repeat
创建了一个子作用域,因此ng repeat
中对名称的引用与名称数组中的原始名称不同,请参见:
新的AngularJS开发人员通常没有意识到ng重复,
ng开关、ng视图和ng包含所有创建新的子作用域,因此
当涉及到这些指令时,问题经常出现。(见此)
示例以快速说明问题。)
关于发生这种情况的原因,当您将输入绑定到ng repeat
内的names中的name时,您正在由ng repeat
创建的名为name
的新子作用域上创建一个新属性,因此,由ng repeat创建的文本框的ng model
引用的名称与names数组的实际第0个元素的名称不同。正如其他人所指出的,如果使用names[$index]
则隐式引用names
数组的第0个元素,因此不会在ng repeat
创建的子作用域上创建新的name属性。angular最佳实践是不要将ng模型绑定到基本体,而是对象,Sandy在回答中提到,如果绑定到对象,您将克服这一点,另外两张海报通过使用$index
引用名称数组的第0个元素来回答这一问题。这是其中之一
还有几个方便的链接:
和。这是由于
ng repeat
创建了一个子作用域,因此ng repeat
中对名称的引用与名称数组中的原始引用不同,请参见:
新的AngularJS开发人员通常没有意识到ng重复,
ng开关、ng视图和ng包含所有创建新的子作用域,因此
当涉及到这些指令时,问题经常出现。(见此)
示例以快速说明问题。)
关于发生这种情况的原因,当您将输入绑定到ng repeat
内的names中的name时,您正在由ng repeat
创建的名为name
的新子作用域上创建一个新属性,因此,由ng repeat创建的文本框的ng model
引用的名称与names数组的实际第0个元素的名称不同。正如其他人所指出的,如果使用names[$index]
则隐式引用names
数组的第0个元素,因此不会在ng repeat
创建的子作用域上创建新的name属性。angular最佳实践是不要将ng模型绑定到基本体,而是对象,Sandy在回答中提到,如果绑定到对象,您将克服这一点,另外两张海报通过使用$index
引用名称数组的第0个元素来回答这一问题。这是其中之一
还有几个方便的链接:
和。如果将第二个输入绑定到:names[$index]
{{name}
如果您将第二个输入绑定到:names[$index],它就会工作
{{name}}
我只是想谈谈我的看法。在我看来,这和你的问题有点关系
<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>
使用ng重复循环:
-
{{name}}
与直接将数组项绑定到控件不同,我更喜欢创建数组的对象,然后绑定每个项的值。这样我们可以避免参考问题
工作原型
希望能有所帮助。我只是想就这一点发表我的看法。在我看来,这和你的问题有点关系
<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>
使用ng重复循环:
-
{{name}}
与直接将数组项绑定到控件不同,我更喜欢创建数组的对象,然后绑定每个项的值。这样我们可以避免参考问题
工作原型
希望有帮助。您在代码中输入了一个拼写错误,您需要将它绑定到名称[$index]而不是名称[$index]您在代码中输入了一个拼写错误,您需要将它绑定到名称[$index]而不是名称[$index]@Hoto,我已经添加了关于如何修复它的说明。@Hoto和我已经添加了关于如何修复它的说明。根据您的请求,我已经在我的答案中添加了更多的细节,说明了为什么你和其他两张海报提出的解决方案与我的答案相关。哎呀……我无法表达我自己。我的意思是,你的方法更好,不是讨论修复,而是给出解释。受你答案的启发,我给出了解释:根据你的要求,我在我的答案中添加了更多的细节,说明了为什么你和其他两张海报提出的解决方案与我的答案相关。哎呀……我无法表达我自己。我的意思是,你的方法更好,不是讨论修复,而是给出解释。受你回答的启发,我给出了解释:D
names[0] = 'One'
names[1] = 'Two'
<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>