объем привязки данных в повторе

0

Я путаюсь с поведением моего кода

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

JS скрипт вышеуказанного кода

Спасибо в ожидании!

Теги:
scope

2 ответа

0
Лучший ответ

В вашем примере, когда вы сначала вводите значения в 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.

  • 0
    Я бы предложил добавить функцию родительского контекста, которая изменяет значение parent, а не использовать селектор $ parent, так как использование $ parent может вызвать некоторую нестабильность в более сложных приложениях. Ничего плохого в этом предложении просто хорошая практика: D
  • 0
    спасибо за объяснение, но если я хочу, чтобы модели 'name' в моем ng-repeat не влияли на редактирование модели parent- 'name'? Как я могу этого достичь. любая идея ?
Показать ещё 1 комментарий
0

Он только понимает, как это работает в Angularjs.

Директива ngModel связывает вход, select, textarea (или пользовательский контроль формы) с свойством в области видимости с помощью NgModelController, который создается и отображается этой директивой.

ngBind сообщает Angular заменять текстовое содержимое указанного элемента HTML значением данного выражения и обновлять текстовый контент при изменении значения этого выражения.

Таким образом, в вашем outer входе вы устанавливаете ng-model с name, а name задается во всех ваших ng-bind и ng-model, поэтому вы видите значение везде.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню