Memahami ekspresi ngRepeat 'track by'

Saya mengalami kesulitan memahami cara kerja trek dengan ekspresi ng-repeat in angularjs. Dokumentasi sangat langka: http://docs.angularjs.org/api/ng/directive/ngRepeat

Bisakah Anda menjelaskan apa perbedaan antara kedua potongan kode tersebut dalam hal pengikatan data dan aspek relevan lainnya?

dengan: track by $index

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

tanpa (keluaran yang sama)

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

Anda bisa track by $indexjika sumber data Anda memiliki pengenal duplikat

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

Anda tidak dapat mengulang koleksi ini saat menggunakan 'id' sebagai pengenal (duplikat id: 1).

TIDAK BEKERJA:

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

tetapi Anda bisa, jika menggunakan track by $index:

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

ringkasan singkat:

track by digunakan untuk menautkan data Anda dengan pembuatan DOM (dan terutama pembuatan ulang) yang dilakukan dengan ng-repeat.

ketika Anda menambahkan, track bypada dasarnya Anda memberi tahu angular untuk menghasilkan satu elemen DOM per objek data dalam koleksi yang diberikan

ini bisa berguna saat paging dan pemfilteran, atau kasus apa pun di mana objek ditambahkan atau dihapus dari ng-repeatdaftar.

biasanya, tanpa track bysudut akan menautkan objek DOM dengan koleksi dengan memasukkan properti expando - $$hashKey- ke dalam objek JavaScript Anda, dan akan membuatnya kembali (dan mengaitkan kembali objek DOM) dengan setiap perubahan.

penjelasan lengkap:

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

panduan yang lebih praktis:

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

(trek oleh tersedia dalam sudut> 1.2)

Jika Anda bekerja dengan objek yang dilacak oleh pengenal (mis. $ Index) daripada seluruh objek dan Anda memuat ulang data Anda nanti, ngRepeat tidak akan membangun kembali elemen DOM untuk item yang telah dirender , meskipun objek JavaScript dalam koleksi memiliki telah diganti dengan yang baru.