在嵌套的ng-repeat指令中使用ng-model
我正在尝试使用ng-model“在”一个ng-repeat指令中，该指令本身嵌套在一个ng-repeat指令中。
下面的jsfiddle演示了我的问题和我解决它的两次尝试。
My Controller的定义如下：
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控制台中显示以下错误两次：
中继器中不允许
重复。中继器:步入轨道
有时，它还会显示以下错误：
中继器中不允许
重复。中继器:在machine.noteMatrix中不存在
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中的矩阵)。
有人能解释一下吗？:)
回答 2
Stack Overflow用户
发布于 2013-04-12 23:19:25
对于Angular中的人们来说，这是一个常见的问题。发生的事情是ng-repeat创建了自己的作用域，如果您将值类型的数组(例如布尔值的数组)传入其中，更新它们将不会更新父作用域。您需要将引用类型的数组传递给ng-repeat并更新这些类型，以便它能够持久化：
Here is a solution showing this based off of your fiddle
machine.noteMatrix = [
[
{ value: false },
{ value: false },
{ value: false }
],
[
{ value: false },
{ value: true },
{ value: false }
],
[
{ value: false },
{ value: false },
{ value: false }
]
];这是丑陋的，我知道，但另一种选择更丑陋。您需要做一些事情来管理您自己的循环，并通过$parent或$parent.$parent对象引用这些值。我不推荐这样做。
Stack Overflow用户
发布于 2014-07-03 03:42:39
您不需要更改模型或访问$parent。缺少的是"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>我不确定当这个问题被问到的时候track by是否存在，所以其他的答案在当时可能是正确的，但在当前的Angular中，这是可行的。
https://stackoverflow.com/questions/15973985
复制相似问题
腾讯云开发者
