javascript - AngularJSの「トラックバイ」とは何ですか?どのように機能しますか?

Question

どのように機能し、何をするのかよくわかりませんtrack by。
私の主な目標は、それを使用してng-repeat精度を高めることです。

score 16 · Accepted Answer

追加するときは、track by基本的に、特定のコレクション内のデータオブジェクトごとに 1 つの DOM 要素を生成するように angular に指示します。

track by $indexデータソースに重複した識別子がある場合は可能です。

重複した項目を繰り返す必要がある場合は、track by 式を使用して、既定の追跡動作を独自の動作に置き換えることができます。

例：

[{id:1,name:'one'}, {id:1,name:'one too'}, {id:2,name:'two'}]

で重複する値を使用しようとするとng-repeat、次のようなエラーが発生します。

エラー: ngRepeat:dupes リピーターの重複キー

この種の問題を回避するには、を使用する必要がありますtrack by $index。例えば：

<ul>
   <li ng-repeat="item in [1, 2, 3, 3] track by $index">
       {{ item }}
   </li>
</ul>

$indexnestedに入る方法は次のng-repeatとおりです。

<div ng-repeat="row in matrix">
    <div ng-repeat="column in row">
      <span>outer: {{$parent.$index}} inner: {{$index}}</span>
    </div>
</div>

以下に役立つリソースをいくつか示します。

score 3 · Accepted Answer

重複アイテムを削除するtrack byというデフォルトの動作に逆らう必要がある場合にのみ使用してください。 scope プロパティを使用するか、カスタム関数を指定して、項目を追跡できます。ng-repeat
$index

例えば：

<div ng-repeat="x in [42, 42, 43, 43] track by $index">
  {{x}}
</div>

配列のすべての値を表示します (42 が 2 回表示されます)。

4 に答える 4