Grundlegendes zum ngRepeat-Ausdruck "Track by"

Ich habe Schwierigkeiten zu verstehen, wie die Spur durch Ausdruck von ng-repeat in anglejs funktioniert. Die Dokumentation ist sehr knapp: http://docs.angularjs.org/api/ng/directive/ngRepeat

Können Sie erklären, was der Unterschied zwischen diesen beiden Codeausschnitten in Bezug auf die Datenbindung und andere relevante Aspekte ist?

mit: track by $index

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

ohne (gleiche Ausgabe)

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

Sie können, track by $indexwenn Ihre Datenquelle doppelte Bezeichner hat

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

Sie können diese Sammlung nicht iterieren, während Sie 'id' als Bezeichner verwenden (doppelte ID: 1).

WIRD NICHT ARBEITEN:

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

aber Sie können, wenn Sie verwenden track by $index:

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

eine kurze Zusammenfassung:

track by wird verwendet, um Ihre Daten mit der DOM-Generierung (und hauptsächlich der Neuerstellung) von ng-repeat zu verknüpfen.

Wenn Sie hinzufügen track by, weisen Sie angle grundsätzlich an, ein einzelnes DOM-Element pro Datenobjekt in der angegebenen Sammlung zu generieren

Dies kann nützlich sein, wenn Sie blättern und filtern oder wenn Objekte hinzugefügt oder aus der ng-repeatListe entfernt werden.

In der Regel track bywerden die DOM-Objekte ohne Winkel mit der Auflistung verknüpft, indem eine expando-Eigenschaft - $$hashKey- in Ihre JavaScript-Objekte eingefügt wird. Bei jeder Änderung wird sie neu generiert (und ein DOM-Objekt neu zugeordnet).

vollständige Erklärung:

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

eine praktischere Anleitung:

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

(Track by ist in Winkel> 1,2 verfügbar)

Wenn Sie mit Objekten arbeiten , die anhand des Bezeichners (z. B. $ index) anstelle des gesamten Objekts verfolgt werden, und Ihre Daten später neu laden, erstellt ngRepeat die DOM-Elemente für bereits gerenderte Elemente nicht neu , selbst wenn die JavaScript-Objekte in der Auflistung vorhanden sind wurde durch neue ersetzt.