Dificultad con ng-model, ng-repeat y entradas

Estoy tratando de permitir que el usuario edite una lista de elementos usando ngRepeat y ngModel . ( Ver este violín .) Sin embargo, ambos enfoques que he intentado conducen a un comportamiento extraño: uno no actualiza el modelo, y el otro difumina el formulario en cada keydown.

¿Estoy haciendo algo mal aquí? ¿No es esto un caso de uso compatible?

Aquí está el código del violín, copiado por conveniencia:

      

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.

1.

Esto parece ser un problema vinculante.

El consejo es que no se unen a los primitivos .

Su ngRepeat itera sobre cadenas dentro de una colección, cuando debería iterar sobre objetos. Para arreglar tu problema

  

Fun with Fields and ngModel

names: {{models}}

Binding to each element directly:

Value: {{model.name}}

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

Utilizando la última versión de Angular (1.2.1) y rastrea por $index . Este problema está arreglado

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

 
Value: {{name}}

Entra en una situación difícil cuando es necesario comprender cómo funcionan los ámbitos , ngRepeat y ngModel con NgModelController . También intente usar la versión 1.0.3. Tu ejemplo funcionará de forma un poco diferente.

Simplemente puede usar la solución provista por jm-

Pero si quieres lidiar con la situación más profundamente, debes entender:

  • cómo funciona AngularJS ;
  • los ámbitos tienen una estructura jerárquica;
  • ngRepeat crea un nuevo scope para cada elemento;
  • ngRepetir la caché de comstackción de elementos con información adicional (hashKey); en cada llamada al reloj para cada elemento nuevo (que no está en la caché) ngRepeat construye un nuevo scope, elemento DOM, etc. Descripción más detallada .
  • desde 1.0.3 ngModelController reindica las entradas con los valores reales del modelo.

Cómo funciona su ejemplo “Enlace a cada elemento directamente” para AngularJS 1.0.3:

  • ingresas la letra 'f' en la entrada;
  • ngModelController cambia el modelo para el scope del artículo (los nombres de la matriz no se cambian) => name == 'Samf' , names == ['Sam', 'Harry', 'Sally'] ;
  • $digest loop se inicia;
  • ngRepeat reemplaza el valor del modelo del scope del artículo ( 'Samf' ) por el valor del conjunto de nombres sin modificar ( 'Sam' );
  • ngModelController entrada con el valor real del modelo ( 'Sam' ).

Cómo funciona su ejemplo “Indexación en la matriz”:

  • ingresas la letra 'f' en la entrada;
  • ngModelController cambia el elemento en los nombres array => `names == [‘Samf’, ‘Harry’, ‘Sally’];
  • $ digest loop se inicia;
  • ngRepeat no puede encontrar 'Samf' en el caché;
  • ngRepeat crea un nuevo ámbito, agrega un nuevo elemento div con una nueva entrada (es por eso que el campo de entrada pierde el foco – el div viejo con la entrada anterior se reemplaza por el nuevo div con la nueva entrada);
  • se muestran nuevos valores para los nuevos elementos DOM.

Además, puedes intentar utilizar AngularJS Batarang y ver cómo cambia $ id del ámbito de div con la entrada en la que ingresas.

Si no necesita que el modelo se actualice con cada golpe de tecla, simplemente conéctese al name y luego actualice el elemento de la matriz en el evento de desenfoque:

 
Value: {{name}}

Acabo de actualizar AngularJs a 1.1.2 y no tengo ningún problema con eso. Supongo que este error fue corregido.

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

El problema parece estar en la forma en que ng-model funciona con la input y sobrescribe el objeto de name , haciéndolo perdido para ng-repeat .

Como solución, uno puede usar el siguiente código:

 
Value: {{name}}

Espero eso ayude

Probé la solución anterior para mi problema que funcionaba como un encanto. ¡Gracias!

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

Aquí está mi versión de eso:

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

y mi HTML

 

Fun with Fields and ngModel

names: {{models}}

Feature 1 Feature 2 Feature 3
Device {{modelCheck.checked}}
{{model.name}}

como hacer algo como:

  

Y en mi elemento de inspector ser: