在嵌套的 ng-repeat 指令中使用 ng-model [英] using ng-model within nested ng-repeat directives

问题描述

我试图在 ng-repeat 指令内"使用 ng-model，该指令本身嵌套在 ng-repeat 指令中.

I'm trying to use ng-model "within" a ng-repeat directive that is itself nested in a ng-repeat directive.

以下 jsfiddle 演示了我的问题以及我解决它的两次尝试.

The following jsfiddle demonstrates my problem and my two attempts to solve it.

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

我的控制器定义如下:

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>

第一个示例/尝试更新控制器内部的machine.noteMatrix，但是每次按下复选框时，angularjs 在javascript 控制台中两次显示以下错误:

The first example/attempt updates the machine.noteMatrix inside the controller, but everytime a checkbox is pressed, angularjs displays the following error twice in the javascript console:

不允许在中继器中重复.中继器:步入正轨

Duplicates in a repeater are not allowed. Repeater: step in track

有时也会显示这个错误:

and sometimes it will also display this error:

不允许在中继器中重复.中继器:machine.noteMatrix[0]

Duplicates in a repeater are not allowed. Repeater: no in 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>

第二个示例/尝试从 noteMatrix 正确读取数据，并且在选中/取消选中复选框时，javascript 控制台中不会显示任何错误.但是，更改它们的状态并不会更新控制器中的 machine.noteMatrix(按显示矩阵"按钮以查看 jsfiddle 中的矩阵).

The second example/attempt reads the data correctly from the noteMatrix and no errors are displayed in the javascript console when checking/unchecking the checkboxes. However changing their states is not updating the machine.noteMatrix in the controller (press the "Show Matrix" button to see the matrix in the jsfiddle).

有人能解释一下吗?:)

Can anyone shed a light on this? :)

推荐答案

这是 Angular 用户的常见问题.发生的事情是 ng-repeat 创建它自己的作用域，如果您将一组值类型传递给它(例如布尔数组)，更新它们将不会更新父作用域.您需要将一组引用类型传递给 ng-repeat 并更新它们以使其持久:

This is a common issue for people in Angular. What's happening is ng-repeat creates it's own scope, and if you pass an array of value types into it (such as an array of booleans), updating them will not update the parent scope. You need to pass an array of reference types to the ng-repeat and update those in order for it to persist:

这是一个基于您的小提琴的解决方案

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

这很丑，我知道，但替代方案更丑.您需要做一些事情来管理您自己的循环并通过 $parent 或 $parent.$parent 对象引用这些值.我不推荐这个.

It's ugly, I know, but the alternative is uglier. You'd need to do something to manage your own loop and reference the values via the $parent or $parent.$parent object. I don't recommend this.

这篇关于在嵌套的 ng-repeat 指令中使用 ng-model的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！