web-dev-qa-db-ja.com

ngRepeatの 'track by'式を理解する

Anglejsのng-repeatのtrack by式がどのように機能するかを理解するのが困難です。ドキュメントは非常に少ないです： http://docs.angularjs.org/api/ng/directive/ngRepeat

これらの2つのコードスニペットの違いが、databindingおよびその他の関連する側面に関して説明できますか？

with：track by $index

<!--names is an array-->
<div ng-repeat="(key, value) in names track by $index">
  <input ng-model="value[key]">                         
</div>

なし（同じ出力）

<!--names is an array-->
<div ng-repeat="(key, value) in names">
   <input ng-model="value[key]">                         
</div>
javascriptangularjsangularjs-ng-repeat
92
Jonathan Grupp

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

例：$scope.dataSource: [{id:1,name:'one'}, {id:1,name:'one too'}, {id:2,name:'two'}]

「id」を識別子として使用している間は、このコレクションを繰り返すことはできません（重複ID：1）。

機能しない：

<element ng-repeat="item.id as item.name for item in dataSource">
  // something with item ...
</element>

ただし、track by $indexを使用している場合は可能です。

<element ng-repeat="item in dataSource track by $index">
  // something with item ...
</element>
86
nilsK

短い要約：

track byは、ng-repeatによって作成されたDOM生成（および主に再生成）にデータをリンクするために使用されます。

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

これは、ページングやフィルタリング、またはオブジェクトがng-repeatリストに追加または削除される場合に役立ちます。

通常、track byなしのangularは、JavaScriptオブジェクトにexpandoプロパティ（$$hashKey）を挿入することによりDOMオブジェクトをコレクションにリンクし、変更ごとに再生成（およびDOMオブジェクトの再関連付け）します。

完全な説明：

http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm

より実用的なガイド：

http://www.codelord.net/2014/04/15/improving-ng-repeat-performance-with-track-by/

（トラックはangular> 1.2で利用可能です）

56
Nuriel

オブジェクトを操作している場合識別子で追跡（例：$ index）オブジェクト全体ではなく後でデータをリロードする場合、ngRepeat DOM要素を再構築しませんコレクション内のJavaScriptオブジェクトが新しいオブジェクトに置き換えられた場合でも、already renderingを持ちます。

7
ram1993