Сложность с ng-моделью, ng-repeat и входами

Я пытаюсь разрешить пользователю редактировать список элементов с помощью ngRepeat и ngModel . ( См. Эту скрипту .) Однако оба подхода, которые я пробовал, приводят к странному поведению: один не обновляет модель, а другой размывает форму при каждом нажатии клавиши.

Я здесь что-то не так? Это не поддерживаемый случай использования?

Вот код из скрипки, скопированный для удобства:

      Fun with Fields and ngModel
 names: {{names}}
 Binding to each element directly:
  Value: {{name}}  
 The binding does not appear to be working: the value in the model is not changed.
 Indexing into the array:
  Value: {{names[$index]}}  
 Type one character, and the input field loses focus. However, the binding appears to be working correctly.

Это, похоже, является обязательной проблемой.

Совет не привязывается к примитивам .

Ваш ngRepeat выполняет итерацию по строкам внутри коллекции, когда она должна быть итерированием по объектам. Чтобы устранить проблему

  Fun with Fields and ngModel
 names: {{models}}
 Binding to each element directly:
  Value: {{model.name}}

jsfiddle: http://jsfiddle.net/jaimem/rnw3u/5/

Использование угловой последней версии (1.2.1) и отслеживание по $index . Эта проблема исправлена

http://jsfiddle.net/rnw3u/53/

  Value: {{name}}

Вы попадаете в сложную ситуацию, когда необходимо понять, как работают scopes , ngRepeat и ngModel с NgModelController . Также попробуйте использовать версию 1.0.3. Ваш пример будет работать несколько иначе.

Вы можете просто использовать решение, предоставляемое jm-

Но если вы хотите глубже заняться ситуацией, вы должны понимать:

как работает AngularJS ;
области имеют иерархическую структуру;
ngRepeat создает новую область для каждого элемента;
ngRepeat построить кеш элементов с дополнительной информацией (hashKey); на каждый вызов часов для каждого нового элемента (который не находится в кеше) ngRepeat создает новую область, элемент DOM и т. д. Более подробное описание .
от 1.0.3 ngModelController входы rerenders с фактическими значениями модели.

Как ваш пример «привязка к каждому элементу напрямую» работает для AngularJS 1.0.3:

вы вводите букву 'f' на вход;
ngModelController изменяет модель для области элемента (массив имен не изменяется) => name == 'Samf' , names == ['Sam', 'Harry', 'Sally'] ;
запускается цикл $digest ;
ngRepeat заменяет значение модели из области приложения ( 'Samf' ) по значению из массива неизменных имен ( 'Sam' );
ngModelController rerenders с фактическим значением модели ( 'Sam' ).

Как работает ваш пример «Индексирование в массив»:

вы вводите букву 'f' на вход;
ngModelController изменяет элемент в именах array => `names == [‘Samf’, ‘Harry’, ‘Sally’];
запускается цикл $ digest;
ngRepeat не может найти 'Samf' в кеше;
ngRepeat создает новую область, добавляет новый элемент div с новым вводом (поэтому поле ввода теряет фокус – старый div со старым входом заменяется новым div с новым вводом);
визуализируются новые значения для новых элементов DOM.

Кроме того, вы можете попытаться использовать AngularJS Batarang и посмотреть, как изменяется $ id области действия div с введенным вами входом.

Если вам не нужна модель для обновления с каждым нажатием клавиши, просто привяжите ее к name и затем обновите элемент массива при событии размытия:

  Value: {{name}}

Я только что обновил AngularJs до 1.1.2 и не испытываю никаких проблем с ним. Я предполагаю, что эта ошибка исправлена.

http://ci.angularjs.org/job/angular.js-pete/57/artifact/build/angular.js

Проблема, похоже, в том, как работает ng-model с input и перезаписывает объект name , что делает его потерянным для ng-repeat .

В качестве обходного пути можно использовать следующий код:

  Value: {{name}}

Надеюсь, поможет

Я попробовал решение выше для моей проблемы, так как это работало как шарм. Благодаря!

http://jsfiddle.net/leighboone/wn9Ym/7/

Вот моя версия:

 var myApp = angular.module('myApp', []); function MyCtrl($scope) { $scope.models = [{ name: 'Device1', checked: true }, { name: 'Device1', checked: true }, { name: 'Device1', checked: true }]; }

и мой HTML

   Fun with Fields and ngModel
 names: {{models}}
     Feature 1 Feature 2  Feature 3  
 
   Device    {{modelCheck.checked}}   
   Which devices?  {{model.name}}