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

entryFiddle #1: using を$index指すng-model を使用したオブジェクトの配列$parent.$index: http://jsfiddle.net/DFEkG/ --すべてのモデルが同時に更新されます

iFiddle #2:代わりにng-model を使用するオブジェクトの配列$index: http://jsfiddle.net/DFEkG/1/ --すべてのモデルが同時に更新されます

entryFiddle #3: using $indexandを指す ng-model を使用する配列$parent.$index: http://jsfiddle.net/DFEkG/2/ --奇妙な動作

iFiddle #4代わりにng-model を使用する配列$index: http://jsfiddle.net/DFEkG/3/ --壊れている

Fiddle #5 ng-repeat ディレクティブで$indexandと array のみを使用する配列: http://jsfiddle.net/DFEkG/4/ --動作します! しかし、オブジェクトとしてではありません$parent.$index

Fiddle #6 5 のテクニックと同じですが、オブジェクトを使用: http://jsfiddle.net/DFEkG/5/ -- fiddles 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 に答える