Я путаюсь с поведением моего кода
<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"
external id="outer"
значение внутри текстового поля отражается во всех текстовых окнах, но если я пытаюсь ввести что-либо в последующие текстовые поля, значение отражает только в теге немедленного абзаца.
Мне было интересно, может ли кто-нибудь объяснить мне, что именно здесь происходит? почему значение, введенное в каждом текстовом поле, не везде?
и почему значение, введенное в элементы тега ng-repeat, доступно только локально?
и почему бы не изменить значение в текстовом поле с id="outer"
позже, не изменит значение в уже отредактированных текстовых окнах ng-repeat?
Спасибо в ожидании!
В вашем примере, когда вы сначала вводите значения в id="outer"
, вы заполняете родительскую 'name' model
, и эта же модель используется в вашем ng-повторе, потому что '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.
Он только понимает, как это работает в Angularjs.
Директива ngModel
связывает вход, select, textarea (или пользовательский контроль формы) с свойством в области видимости с помощью NgModelController, который создается и отображается этой директивой.
ngBind
сообщает Angular заменять текстовое содержимое указанного элемента HTML значением данного выражения и обновлять текстовый контент при изменении значения этого выражения.
Таким образом, в вашем outer
входе вы устанавливаете ng-model
с name
, а name
задается во всех ваших ng-bind
и ng-model
, поэтому вы видите значение везде.