6

私はAngularJSで問題なく動作することを期待していたものに行き詰まっていますが、奇妙なことに...

データを 2D 配列として返す JSON サービスを使用しています。

$scope.data= [
    ["val-11", "val-12", "val-13"],
    ["val-21", "val-22", "val-23"]
    ];

これから、次のようなテーブルを生成しようとしています。

<table>
<tr ng-repeat="row in data">
<td ng-repeat="col in row">{{col}}</td>
</tr>
</table>

AngularJS がそのような基本的なシナリオを処理しない理由がわかりません。親ループの正しい $index を取得できます。必要に応じて、値を反復処理できますが、この「データ [0] の列」のような 1 つのループのみを使用できますが、ネストされたループを使用しようとしても結果を取得できません。上図のようにループします。

私は何か間違ったことをしていますか？基本的すぎてすぐに機能しないようです。この奇妙な問題について誰か助けてください。

4

1 に答える 1

14

Angular 1.0.x の ng-repeat ディレクティブには、オブジェクト以外の値 (つまり、文字列または数値) が追加、削除、または移動されたかどうかを「推測」しようとすることによって引き起こされる多数のバグがありました。問題は、非オブジェクトには独自のアイデンティティがないため、正確に追跡できないことです。これは多くの場合に問題となり、ngRepeat コードが大量の回避策とエッジ ケースで肥大化する原因にもなりました。

1.2 では、ng-repeat の構文を改善して、開発者がコレクション内のアイテムを識別する方法を正確に指定できるようにしました。これは「track by」キーワードによって行われます。この結果の 1 つは、同じ識別子を持つアイテムを許可しないことです。

デフォルトでは、ng-repeat はアイテムの値で追跡しようとします。同じオブジェクトまたは同一の文字列や数字などのアイテムを繰り返した場合、ng-repeat は文句を言い、コンソールにエラーが表示されます。

var TableCtrl = function($scope) {
  $scope.data= [
    ["", "", "val-13"]
  ];
}

ここで、サブ配列の最初の 2 つの項目は同じ「空の」文字列です。このフィドルを参照してください: http://jsfiddle.net/tEU8r/

コレクションに繰り返しアイテムが本当に必要な場合は、それらを区別するための ng-repeat のメソッドを提供する必要があります。最も単純で明白なアプローチは、コレクション内の位置によってアイテムを追跡することです。これは、"track by $index" を使用して行われます。以下は同じ例ですが、次のように修正されています。

<table ng-controller="TableCtrl">
  <tr ng-repeat="row in data">
    <td ng-repeat="col in row track by $index">
       {{$parent.$index}}-{{$index}} {{col}}
    </td>
  </tr>
</table>

http://jsfiddle.net/h44Z8/

したがって、これは AngularJS のバグではありません。しかし、1.2 にアップグレードするときにこの変更に注意する必要があるというあなたの意見は正しいです。

于 2013-10-08T12:37:03.393 に答える