ng-repeat中的数据绑定范围

I am confused with the behavior of my code

我对我的代码的行为感到困惑

<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>

so the problem is when i enter some value in textbox with id="outer" the value inside the textbox reflects on all the textboxs but if i try to enter something in the subsequent text boxs the value reflects just in the immediate paragraph tag.

所以问题是当我在文本框中输入id =“outer”的某个值时,文本框内的值会反映在所有文本框中,但如果我尝试在后续文本框中输入内容,则该值仅反映在直接段落标记中。

I was wondering if anyone can explain me what exactly is going on here ? why not the value entered in every textbox is coming everywhere ?

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

and why the value entered in the ng-repeat tag elements is available locally only ?

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

and why not changing the value in the textbox with id="outer" later on does not change the value in the already edited ng-repeat textboxs ?

为什么不在以后使用id =“outer”更改文本框中的值不会更改已编辑的ng-repeat文本框中的值?

JS fiddle of the above code

JS上面代码的小提琴

Thanks in anticipation !

在期待中感谢!

2 个解决方案

#1

In your example, when you are first inputting values into id="outer", you are populating parent 'name' model, and that same model is used in your ng-repeat, because 'name' models in your ng-repeat are not yet initialized. That's why after you are inputting values in your other textboxes - name models are initialized for each of the items in 'countries'.

在您的示例中,当您第一次将值输入到id =“outer”时,您将填充父'name'模型,并且在ng-repeat中使用相同的模型,因为ng-repeat中的'name'模型不是尚未初始化。这就是为什么在您在其他文本框中输入值之后 - 为“国家/地区”中的每个项目初始化名称模型。

Therefore, if you would like for example to modify the name model of your parent, you would do like this:

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

<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>

That way when you will be inputting in any of the inputs - you would be modifying the same 'name' model.

这样,当您输入任何输入时 - 您将修改相同的“名称”模型。

#2

It's only understand how it works in Angularjs.

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

The ngModel directive binds an input, select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.

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

The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.

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

So in your input outer you set ng-model with name, and name is set in all your ng-bind and ng-model, that's why you see the value everywhere.

因此,在输入外部,您可以使用名称设置ng-model,并在所有ng-bind和ng-model中设置名称,这就是您在任何地方都可以看到值的原因。

#1