web-dev-qa-db-fra.com

Comprendre l'expression 'track by' de ngRepeat

Je ne parviens pas à comprendre comment la piste par expression de ng-repeat dans angularjs fonctionne. 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>
javascriptangularjsangularjs-ng-repeat
94
Jonathan Grupp

Vous pouvez track by $index si votre source de données contient des identificateurs en double.

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

Vous ne pouvez pas itérer cette collection en utilisant 'id' comme identifiant (duplicate id: 1).

NE FONCTIONNERA 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>
86
nilsK

un bref résumé:

track by est utilisé pour lier vos données à la génération DOM (et principalement à la régénération) réalisée par ng-repeat.

lorsque vous ajoutez track by, vous indiquez à 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 tous les cas où des objets sont ajoutés ou supprimés de la liste ng-repeat.

généralement, sans track by angular liera les objets DOM à la collection en injectant une propriété expando - $$hashKey - dans vos objets JavaScript, et le régénérera (et associera de nouveau une Objet DOM) à chaque changement.

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 dans angular> 1.2)

57
Nuriel

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

7
ram1993