angularjs - otro - usando ng-model dentro de directivas anidadas ng-repeat

ng-repeat dentro de otro ng-repeat

Question

Estoy tratando de usar ng-model "dentro" de una directiva ng-repeat que está anidada en una directiva ng-repeat.

El siguiente jsfiddle demuestra mi problema y mis dos intentos por resolverlo.

http://jsfiddle.net/rskLy/4/

Mi controlador se define de la siguiente manera:

var mod = angular.module(''TestApp'', []);
mod.controller(''TestCtrl'', function ($scope) {        
var machine = {};
machine.noteMatrix = [
    [false, false, false],
    [false, true, false],
    [false, false, false]
];

$scope.machine = machine;

// ...
});

1.

<table>
    <thead>
        <tr>
            <th>--</th>
            <th ng-repeat="no in machine.noteMatrix[0]">{{$index+1}}</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="track in machine.noteMatrix">
            <td>--</td>                
            <td ng-repeat="step in track">                    
                <input type="checkbox" ng-model="track[$index]"> {{step}}
            </td>
        </tr>
    </tbody>
</table>

El primer ejemplo / intento actualiza la machine.noteMatrix dentro del controlador, pero cada vez que se presiona una casilla de verificación, angularjs muestra el siguiente error dos veces en la consola de javascript:

No se permiten duplicados en un repetidor. Repetidor: paso en pista

y, a veces, también mostrará este error:

No se permiten duplicados en un repetidor. Repetidor: no en machine.noteMatrix [0]

2.

<table>
    <thead>
        <tr>
            <th>--</th>
            <th ng-repeat="no in machine.noteMatrix[0]">{{$index+1}}</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="track in machine.noteMatrix">
            <td>--</td>                
            <td ng-repeat="step in track">                    
                <input type="checkbox" ng-model="step"> {{step}}
            </td>
        </tr>
    </tbody>
</table>

El segundo ejemplo / intento lee los datos correctamente de noteMatrix y no se muestran errores en la consola de javascript al marcar / desmarcar las casillas de verificación. Sin embargo, cambiar sus estados no es actualizar machine.noteMatrix en el controlador (presione el botón "Mostrar Matriz" para ver la matriz en el archivo jsfiddle).

¿Alguien puede arrojar una luz sobre esto? :)

Answer 1

Este es un problema común para las personas en Angular. Lo que sucede es que ng-repeat crea su propio ámbito, y si le pasas una matriz de tipos de valor (como una matriz de valores booleanos), actualizarlos no actualizará el ámbito principal. Debe pasar una matriz de tipos de referencia a la repetición ng y actualizarlos para que persista:

Aquí hay una solución que muestra esto basado en tu violín.

machine.noteMatrix = [
    [
        { value: false },
        { value: false }, 
        { value: false }
    ],
    [
        { value: false },
        { value: true }, 
        { value: false }
    ],
    [
        { value: false },
        { value: false }, 
        { value: false }
    ]
];

Es feo, lo sé, pero la alternativa es más fea. Necesitará hacer algo para administrar su propio bucle y hacer referencia a los valores a través del objeto $ parent o $ parent. $ Parent. Yo no recomiendo esto.

Answer 2

No necesitas alterar tu modelo o acceder a $ parent. Lo que falta es "track by $ index":

    <tr ng-repeat="track in machine.noteMatrix">
        <td>--</td>                
        <td ng-repeat="step in track track by $index">                    
            <input type="checkbox" ng-model="track[$index]"> {{step}}
        </td>
    </tr>

Aquí está en su violín.

Más información: Duplicaciones angulares ng de repetición.

No estoy seguro de si ya existía el track by cuándo se hizo la pregunta, por lo que las otras respuestas pueden haber sido correctas en ese momento, pero en Angular actual, este es el camino a seguir.

Answer 3

Tu primera solución parece ser la correcta.

Esto parece ser un error, introducido en la rama inestable de angularJS (está utilizando 1.1.4, que es inestable - la versión estable, 1.0.6, funciona como se esperaba)

EDITAR:

Resulta que esto no es un error, sino una nueva característica: la directiva ngRepeat ahora permite que se defina una función de seguimiento (asociando la identificación del modelo con el elemento DOM), y ya no permite que se repitan estas variables de seguimiento. Vea la confirmación correspondiente , los documentos para 1.1.4 en ngRepeat y el registro de cambios