Zrozumienie wyrażenia ngRepeat „track by”

Mam trudności ze zrozumieniem, jak działa utwór wyrażony przez wyrażenie ng-repeat w angularjs. Dokumentacja jest bardzo rzadka: http://docs.angularjs.org/api/ng/directive/ngRepeat

Czy możesz wyjaśnić, jaka jest różnica między tymi dwoma fragmentami kodu pod względem wiązania danych i innych istotnych aspektów?

z: track by $index

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

bez (to samo wyjście)

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

Możesz, track by $indexjeśli źródło danych ma zduplikowane identyfikatory

na przykład: $scope.dataSource: [{id:1,name:'one'}, {id:1,name:'one too'}, {id:2,name:'two'}]

Nie możesz iterować tej kolekcji, używając „id” jako identyfikatora (zduplikowany identyfikator: 1).

NIE DZIAŁA:

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

ale możesz, jeśli używasz track by $index:

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

krótkie podsumowanie:

track by jest używany w celu powiązania danych z generacją DOM (i głównie ich ponownym generowaniem) wykonaną przez ng-repeat.

kiedy dodajesz track by, w zasadzie mówisz angularowi, żeby wygenerował pojedynczy element DOM na obiekt danych w danej kolekcji

może to być przydatne podczas stronicowania i filtrowania lub w każdym przypadku, gdy obiekty są dodawane lub usuwane z ng-repeatlisty.

zazwyczaj bez track byangular łączy obiekty DOM z kolekcją, wstrzykując właściwość expando - $$hashKey- do twoich obiektów JavaScript i ponownie ją generuje (i ponownie kojarzy obiekt DOM) przy każdej zmianie.

pełne wyjaśnienie:

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

bardziej praktyczny przewodnik:

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

(śledzenie jest dostępne pod kątem> 1,2)

Jeśli pracujesz z obiektami śledzonymi według identyfikatora (np. $ Index) zamiast z całym obiektem i ponownie załadujesz dane później, ngRepeat nie odbuduje elementów DOM dla elementów, które już wyrenderował , nawet jeśli obiekty JavaScript w kolekcji mają zostały zastąpione nowymi.