I recently got the console error `
Error: [ngRepeat:dupes] duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys...
which I then used 'track by $index' and the issue was solved...
But that got me thinking... is there a reason why you wouldn't want to use track by $index in an ng-repeat?
I've read SO questions like this one as well as other articles, but it seems like almost all of the articles only talk about the advantages of using 'track by'.
Can someone list the disadvantages and give an example of when you wouldn't want to use track by $index?
It has a disadvantage,
'track by' expression tracks by index in the array. It means that as long as the index stays the same, angularjs thinks it's the same object.
So if you replace any object in the array, angularjs think it didn't change because the index in the array is still the same. Because of that the change detection wont trigger when you expect it would.
Take a look at this example
Try to change the name, nothing happens. Remove track by index, it works. add track by item.name, it still works.
There are multiple reasons to avoid track by $index
- Avoid using
track by $indexwhen using one-time bindings - Avoid
track by $indexwhen there is a unique property identifier - Other Examples of problems with
track by $index
Avoid using track by $index when using one-time bindings
The documentation specifically states that track by $index should be avoided when using one-time bindings.
From the Docs:
Avoid using
track by $indexwhen the repeated template contains one-time bindings. In such cases, thenthDOM element will always be matched with thenthitem of the array, so the bindings on that element will not be updated even when the corresponding item changes, essentially causing the view to get out-of-sync with the underlying data.
Avoid track by $index when there is a unique property identifier
Avoid track by $index when there is a unique property identifier to work with. When working with objects that are all unique, it is better to let ng-repeat to use its own tracking instead of overriding with track by $index.
From the Docs:
If you are working with objects that have a unique identifier property, you should track by this identifier instead of the object instance. Should you reload your data later,
ngRepeatwill not have to rebuild the DOM elements for items it has already rendered, even if the JavaScript objects in the collection have been substituted for new ones. For large collections, this significantly improves rendering performance.
Other Examples of problems with track by $index
I have also seen problems when objects are added and removed from arrays of objects.
来源：https://stackoverflow.com/questions/45720622/when-not-to-use-track-by-index-in-an-angularjs-ng-repeat