AngularJS - ngRepeat and ngModel

Question

我花了几个小时的时间来写和重写这个，如果没有答案，我可能只是要在这里写我自己的指令。

我有一个列化的输入显示，6列中每列有10个输入。我使用2个ngregreat指令来显示它们。我在下面列出了6把小提琴，以及我为使它们正确工作所做的各种尝试。问题是，当我使用对象数组时，所有数据都会同时更新。查看下面的小提琴#1来查看示例。

下面是一个简短的代码片段，您也可以在fiddle页面上看到它。如果有人有一些建议或方法来实现第1、2或6条，请告诉我!

HTML:

<div ng-controller='EntryCtrl'>
<div class="span2" ng-repeat="a in [0,1,2,3,4,5]">
    <div ng-repeat="i in entry.slice($index*10, ($index*10)+10)" ng-class="{'control-group': true, error: !entry[($parent.$index*10)+$index].correct}">{{($parent.$index*10)+$index}}<input type="text" class="span12" id="entry-{{($parent.$index*10)+$index}}" ng-model="entry[($parent.$index*10)+$index].input" /></div>
</div>
</div>

Javascript:

var myApp = angular.module('myApp', []);
myApp.controller('EntryCtrl', ['$scope', function($scope) {
    $scope.entry=filledArray(60,{input:'',correct:true});
}]);
function filledArray(len, val) {
    var rv = new Array(len);
    while (--len >= 0) {
        rv[len] = val;
    }
    return rv;
}

欺骗#1:使用ng-model指向entry使用$index和$parent.$index的对象数组:http://jsfiddle.net/DFEkG/—所有模型同步更新

乱子#2:使用ng-model指向i而不是$index的对象数组:http://jsfiddle.net/DFEkG/1/—所有模型同时更新

欺骗#3:数组使用ng-model指向entry使用$index和$parent.$index: http://jsfiddle.net/DFEkG/2/- 奇怪的行为

小提琴#4数组使用ng-model指向i而不是$index: http://jsfiddle.net/DFEkG/3/—破碎

小提琴#5数组只使用$index和$parent.$index和数组只在ng-repeat指令:http://jsfiddle.net/DFEkG/4/——工作!但不是object

小提琴#6与5相同的技术，但有一个对象:http://jsfiddle.net/DFEkG/5/—与小提琴1和2相同

Answer 1

问题在于您的filledArray函数。它为每个数组项赋值相同的对象。相同的对象{input: '', correct: true}在所有60个实例中被引用。

所以，要修复它，你可以简单地在每次迭代中创建一个新的副本:

function filledArray(len, val) {
    var rv = new Array(len);
    while (--len >= 0) {
        rv[len] = angular.copy(val);
    }
    return rv;
}

小提琴。