Question

我对代码的行为感到困惑

<body>
      <h1>Sample Application</h1>

      <div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]"> 
         <p>Enter your Name: <input type = "text" id="outer" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
         <p>List of Countries with locale:</p>

         <ol>
            <li ng-repeat = "country in countries">
               {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
               <p>Enter your Name: <input type = "text" id="{{country.name}}_inner" ng-model = "name"></p>
               <p>Hello <span ng-bind = "name"></span>!</p>
            </li>
         </ol>
      </div>

      <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

   </body>

所以问题是当我在文本框中输入一些值id="outer"时，文本框内的值会反映在所有文本框中，但如果我尝试在后续文本框中输入内容，则该值仅反映在直接段落中标签

我想知道是否有人可以解释我到底发生了什么？为什么不在每个文本框中输入的值到处都是？

为什么在ng-repeat标签元素中输入的值仅在本地可用？

为什么以后用id="outer"更改文本框中的值不会更改已编辑的ng-repeat文本框中的值？

JS fiddle of the above code

感谢您的期待！

Answer 1

在您的示例中，当您第一次将值输入id="outer"时，您正在填充父'name' model，并且您的ng-repeat中使用了相同的模型，因为您的'name' models ng-repeat尚未初始化。这就是为什么在您在其他文本框中输入值之后 - 为'countries'中的每个项初始化名称模型。

因此，如果您想要修改父级的名称模型，您可以这样做：

<li ng-repeat = "country in countries">
               {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
               <p>Enter your Name: <input type = "text" id="{{country.name}}_inner" ng-model = "$parent.name"></p>
               <p>Hello <span ng-bind = "name"></span>!</p>
            </li>

这样当您输入任何输入时 - 您将修改相同的'name' model.

Answer 2

它只能理解它在Angularjs中是如何工作的。

ngModel指令使用NgModelController将输入，select，textarea（或自定义表单控件）绑定到作用域上的属性，NgModelController由此指令创建和公开。

ngBind属性告诉Angular将指定HTML元素的文本内容替换为给定表达式的值，并在该表达式的值更改时更新文本内容。

因此，在您的输入outer中，您使用ng-model设置了name，并在name和ng-bind中设置了ng-model，这是为什么你到处都看到了价值。

ng-repeat中的数据绑定范围

2 个答案: