17

それ自体が ng-repeat ディレクティブにネストされている ng-repeat ディレクティブの「内」で ng-model を使用しようとしています。

次のjsfiddleは、私の問題とそれを解決するための2つの試みを示しています。

http://jsfiddle.net/rskLy/4/

私のコントローラーは次のように定義されています： 

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 コンソールに次のエラーを 2 回表示します。

リピーターでの重複は許可されていません。リピーター: ステップ イン トラック

また、次のエラーが表示されることもあります。

リピーターでの重複は許可されていません。リピーター: machine.noteMatrix[0] ではありません

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>

2 番目の例/試行では、noteMatrix からデータを正しく読み取り、チェックボックスをオンまたはオフにしても、javascript コンソールにエラーは表示されません。ただし、それらの状態を変更しても、コントローラーの machine.noteMatrix は更新されません (「マトリックスを表示」ボタンを押して、jsfiddle でマトリックスを表示します)。

誰でもこれに光を当てることができますか？:)

4

3 に答える 3

15

これは、Angular のユーザーにとって一般的な問題です。何が起こっているのかというと、ng-repeat は独自のスコープを作成し、それに値型の配列 (ブール値の配列など) を渡すと、それらを更新しても親スコープは更新されません。参照型の配列を ng-repeat に渡し、それらを更新して永続化する必要があります。

これは、フィドルに基づいてこれを示すソリューションです

machine.noteMatrix = [
    [
        { value: false },
        { value: false }, 
        { value: false }
    ],
    [
        { value: false },
        { value: true }, 
        { value: false }
    ],
    [
        { value: false },
        { value: false }, 
        { value: false }
    ]
];

醜いことはわかっていますが、別の方法はもっと醜いです。独自のループを管理し、 $parent または $parent.$parent オブジェクトを介して値を参照するには、何かを行う必要があります。これはお勧めしません。

于 2013-04-12T15:19:25.247 に答える
3

あなたの最初の解決策は正しいようです。

これは、angularJS の不安定なブランチで導入されたバグのようです (不安定な 1.1.4 を使用しています - 安定したバージョンの 1.0.6 は期待どおりに動作します)。

編集：

これはバグではなく、新機能であることが判明しました。ngRepeat ディレクティブにより、追跡機能を定義できるようになり (モデルの ID を DOM 要素に関連付ける)、これらの追跡変数を繰り返すことができなくなりました。対応する commit、ngRepeat の 1.1.4のドキュメント、およびchangelogを参照してください。

于 2013-04-12T14:58:21.823 に答える