0

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

我有一个输入的列显示,6 列中的每列 10 个。我正在使用 2 个 ngRepeat 指令来显示它们。我在下面放置了 6 个小提琴,并尝试让它们正常工作。问题是,当我使用对象数组时,所有数据都会同时更新。查看下面的 Fiddle #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;
}

Fiddle #1: Array of objects using ng-model pointing to entry using $index and $parent.$index: http://jsfiddle.net/DFEkG/ -- All models update simultaneously

Fiddle #2: Array of objects using ng-model pointing to i instead of $index: http://jsfiddle.net/DFEkG/1/ -- All models update simultaneously

Fiddle #3: Array using ng-model pointing to entry using $index and $parent.$index: http://jsfiddle.net/DFEkG/2/ -- Weird behavior

Fiddle #4 Array using ng-model pointed to i instead of $index: http://jsfiddle.net/DFEkG/3/ -- Broken

Fiddle #5 Array仅在 ng-repeat 指令中使用$indexand和数组:http: //jsfiddle.net/DFEkG/4/ -有效!但不作为对象$parent.$index

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

4

1 回答 1

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

小提琴

于 2013-03-29T23:53:01.587 回答