Розуміння виразу ngRepeat 'track by'

У мене виникають труднощі з розумінням того, як працює трек із виразом ng-повтору в angularjs. Документація дуже обмежена: http://docs.angularjs.org/api/ng/directive/ngRepeat

Чи можете ви пояснити, яка різниця між цими двома фрагментами коду з точки зору прив'язки даних та інших відповідних аспектів?

з: track by $index

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

без (той же вихід)

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

Ви можете, track by $indexякщо ваше джерело даних має дублікати ідентифікаторів

наприклад: $scope.dataSource: [{id:1,name:'one'}, {id:1,name:'one too'}, {id:2,name:'two'}]

Ви не можете повторити цю колекцію під час використання "id" як ідентифікатора (дублікат id: 1).

НЕ РОБИТИ:

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

але ви можете, якщо використовуєте track by $index:

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

короткий підсумок:

track by використовується для того, щоб зв’язати ваші дані з генерацією DOM (і головним чином повторним поколінням), зробленою ng-повтором.

коли ви додаєте, track byви в основному говорите кутовий для створення одного елемента DOM на кожен об'єкт даних у даній колекції

це може бути корисно під час пейджингу та фільтрації, або будь-якого випадку, коли об’єкти додаються чи видаляються зі ng-repeatсписку.

зазвичай без track byкутового зв’язує об’єкти DOM зі колекцією шляхом введення властивості експандо - $$hashKey- у ваші JavaScript-об’єкти та регенерує його (та повторно асоціює об’єкт DOM) із кожною зміною.

повне пояснення:

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

більш практичне керівництво:

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

(Доріжка доступна у куті> 1.2)

Якщо ви працюєте з відстеженням об'єктів за ідентифікатором (наприклад, $ index) замість цілого об'єкта, і ви перезавантажуєте свої дані пізніше, ngRepeat не відновить елементи DOM для елементів, які він вже видав , навіть якщо об’єкти JavaScript у колекції мають були замінені на нові.