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>
javascript
angularjs
angularjs-ng-repeat
Jonathan Grupp
sumber
sumber
Jawaban:
Anda bisa
track by $index
jika sumber data Anda memiliki pengenal duplikatmisalnya:
$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:
tetapi Anda bisa, jika menggunakan
track by $index
:sumber
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 by
pada dasarnya Anda memberi tahu angular untuk menghasilkan satu elemen DOM per objek data dalam koleksi yang diberikanini bisa berguna saat paging dan pemfilteran, atau kasus apa pun di mana objek ditambahkan atau dihapus dari
ng-repeat
daftar.biasanya, tanpa
track by
sudut 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)
sumber
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.
sumber