Comprendre l'expression ngRepeat 'track by'

J'ai du mal à comprendre comment fonctionne la piste par expression de ng-repeat dans angularjs. La documentation est très rare: http://docs.angularjs.org/api/ng/directive/ngRepeat

Pouvez-vous expliquer quelle est la différence entre ces deux extraits de code en termes de liaison de données et d'autres aspects pertinents?

avec: track by $index

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

sans (même sortie)

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

Vous pouvez track by $indexsi votre source de données a des identifiants en double

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

Vous ne pouvez pas parcourir cette collection en utilisant «id» comme identifiant (id en double: 1).

NE FONCTIONNE PAS:

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

mais vous pouvez, si vous utilisez track by $index:

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

un bref résumé:

track by est utilisé afin de lier vos données avec la génération DOM (et principalement la re-génération) faite par ng-repeat.

lorsque vous ajoutez, track byvous dites essentiellement à angular de générer un seul élément DOM par objet de données dans la collection donnée

cela peut être utile lors de la pagination et du filtrage, ou dans tout cas où des objets sont ajoutés ou supprimés de la ng-repeatliste.

généralement, sans track byangular, il liera les objets DOM avec la collection en injectant une propriété expando - $$hashKey- dans vos objets JavaScript, et le régénérera (et réassociera un objet DOM) à chaque modification.

explication complète:

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

un guide plus pratique:

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

(track by est disponible en angulaire> 1.2)

Si vous travaillez avec des objets suivis par l'identifiant (par exemple $ index) au lieu de l'objet entier et que vous rechargez vos données plus tard, ngRepeat ne reconstruira pas les éléments DOM pour les éléments qu'il a déjà rendus , même si les objets JavaScript de la collection ont remplacé par de nouveaux.