嵌套NG-重复指令内使用NG-模型 [英] using ng-model within nested ng-repeat directives

问题描述

我试图内向本身嵌套在NG重复指令，一个NG重复指令中使用NG-模式。

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/

我的控制器定义如下：

My Controller is defined as follows:

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>

第一个例子/企图JavaScript控制台更新machine.noteMatrix控制器内，但每次复选框是pressed，angularjs显示以下错误两次：

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（preSS显示矩阵按钮，看到的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? :)

推荐答案

这是人们在角的共同课题。这是怎么回事是NG-重复创建它自己的范围，如果传递的值类型的数组进去（如布尔数组），更新它们不会更新父范围。您需要引用类型的数组传递到NG-重复和更新这些，以便它继续存在：

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 }
    ]
];

这是丑陋的，我知道，但另一种方法是丑陋。你需要做一些事情来管理自己的循环，并通过$父母或父母$。$父对象引用的值。我不建议这样做。

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-重复指令内使用NG-模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！