Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/428.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript ng模型绑定不会更新同一对象上的另一个ng模型_Javascript_Angularjs - Fatal编程技术网

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>