angularjs - reactivos - tablas angular 4

Enlazar entradas a una matriz de primitivas usando ngRepeat=> entradas no editables

Question

Aquí hay una demo de mi problema.

$scope.myNumbers = [10, 20, 30];

<div ng-repeat="num in myNumbers">
    <input type="text" ng-model="num">
    <div>current scope: {{num}}</div>
</div>

¿Puede alguien explicarme por qué las entradas no son editables / solo de lectura? Si es por diseño, ¿cuál es la razón detrás?

ACTUALIZACIÓN 20/02/2014

Parece que esto ya no es un problema para v1.2.0 + Demo . Pero tenga en cuenta que aunque los controles de usuario ahora son editables con las nuevas versiones de angularJS, es la propiedad num en los ámbitos secundarios , no el ámbito principal, la que se modifica. En otras palabras, la modificación de los valores en los controles de usuario no afecta a la matriz myNumbers .

Answer 1

¿Puede alguien explicarme por qué las entradas no son editables / solo de lectura? Si es por diseño, ¿cuál es la razón detrás?

Es por diseño, a partir de Angular 1.0.3 . Artem tiene una muy buena explicación de cómo funciona 1.0.3+ cuando "se enlaza con cada elemento ng-repetición directamente", es decir,

<div ng-repeat="num in myNumbers">
  <input type="text" ng-model="num">

Cuando la página se muestra inicialmente, aquí hay una imagen de sus ámbitos (eliminé uno de los elementos de la matriz, por lo que la imagen tendría menos cuadros):

^{(Click para agrandar)}

Las líneas discontinuas muestran la herencia de alcance prototípico.
Las líneas grises muestran las relaciones hijo → padre (es decir, lo que $parent referencia a $parent ).
Las líneas marrones muestran $$ siguienteSibling.
Las cajas grises son valores primitivos. Las cajas azules son matrices. Púrpura son objetos.

Tenga en cuenta que la respuesta de SO que mencioné en un comentario se escribió antes de que saliera la versión 1.0.3. Antes de la versión 1.0.3, los valores numéricos en los ámbitos secundarios ngRepeat realmente cambiarían cuando escribiera en los cuadros de texto. (Estos valores no serían visibles en el ámbito principal). Desde 1.0.3, ngRepeat ahora reemplaza los valores numéricos del alcance ngRepeat con los valores (sin cambios) de la matriz myNumbers del ámbito principal / principal durante el ciclo de resumen. Esto esencialmente hace que las entradas no sean editables.

La solución es utilizar una matriz de objetos en su MainCtrl:

$scope.myNumbers = [ {value: 10}, {value: 20} ];

y luego se enlaza a la propiedad de value del objeto en el ngRepeat:

<div ng-repeat="num in myNumbers">
  <input type="text" ng-model="num.value">
  <div>current scope: {{num.value}}</div>

Answer 2

Este problema se resuelve ahora con versiones más recientes de AngularJS con la función de track by característica que permite a los repetidores sobre primitivas:

<div ng-repeat="num in myNumbers track by $index">
  <input type="text" ng-model="myNumbers[$index]">
</div>

La página no se volverá a pintar después de cada pulsación de tecla, lo que resuelve el problema del foco perdido. El documento oficial de AngularJS es bastante vago y confuso acerca de esto.

Answer 3

Parece que Angular no es capaz de escribir al modelo definido de esa manera. Use la referencia al atributo inicial $ scope para permitir que se vincule al valor de manera correcta:

<div ng-repeat="num in myNumbers">
  <input type="text" ng-model="myNumbers[$index]">
</div>

Answer 4

Tuve un problema similar (y también requerí la funcionalidad ''agregar'' y ''eliminar''), y resolví el problema así:

$scope.topics = [''''];
$scope.removeTopic = function(i) {
   $scope.topics.splice(i, 1); 
}

<div ng-repeat="s in topics track by $index">
    <input ng-model="$parent.topics[$index]" type="text">
    <a ng-click="removeTopic($index)">Remove</a>
</div>

<a ng-click="topics.push(''new topic'')">Add</a>

Answer 5

ngRepeat utiliza una referencia a la matriz de origen. Dado que integer (Number in js) es un tipo de valor , no un tipo de referencia , por lo tanto, no se puede pasar por referencia en javascript. El cambio no será propagado.

Aquí hay una demostración:

   var x = 10;
   var ox = {value:10};

   var y = x;
   var oy = ox;

   y = 15
   oy.value = 15;

¿Cuáles serían los valores de x y ox ?

>> x = 10;
>> y = 15;
>> ox = {value:15};
>> oy = {value:15};

Todos los objetos de javascript se pasan por referencia y todos los primitivos se pasan por valor ["cadena", "número", etc.).

Plunker de trabajo http://plnkr.co/edit/7uG2IvAdC2sAEHbdHG58