Question

我花了几个小时编写和重写这篇文章的大部分时间，如果没有答案，我可能会在这里编写自己的指令。

我有一个列的输入显示，每列6列。我使用2 ngRepeat指令来显示它们。我在下面放了6个小提琴，试图让他们正常工作。问题是，当我使用一个对象数组时，所有数据都会同时更新。查看下面的小提琴＃1以查看示例。

以下是代码的快速摘要，您也可以在小提琴页面上看到它。如果有人有指示或方法让＃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：使用指向entry的ng-model的对象数组$index和$parent.$index：http://jsfiddle.net/DFEkG/ - 所有模型同时更新

小提琴＃2：使用ng-model指向i而不是$index的对象数组：http://jsfiddle.net/DFEkG/1/ - 所有模型同时更新

小提琴＃3：使用指向entry的ng-model的数组使用$index和$parent.$index：http://jsfiddle.net/DFEkG/2/ - 奇怪的行为

使用ng-model的小提琴＃4数组指向i而不是$index：http://jsfiddle.net/DFEkG/3/ - 已破坏

小提琴＃5仅使用$index和$parent.$index的数组，仅在ng-repeat指令中使用数组：http://jsfiddle.net/DFEkG/4/ - 工作！但不是作为对象

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

Answer 1

问题出在您的filledArray功能中。它为每个数组项分配相同的确切对象。在所有60个实例中引用了相同的对象{input: '', correct: true}。

因此，要修复它，您可以在每次迭代时简单地创建它的新副本：

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

Fiddle

AngularJS - ngRepeat和ngModel

1 个答案: