ng-repeat with track by over multiple properties

angularjs angularjs-ng-repeat angularjs-track-by
qwetty picture qwetty · Jan 30, 2015 · Viewed 24.9k times · Source

I have a problem with angular ng-repeat directive. Currently I work on some project where from the API I get a list of items (some times it could be 1k items) and this list should be refreshed every 5 seconds (it is monitoring related project).

When the list length is a little bigger the website while re-rendering DOM could "slow". It comes out that angular regenerate the whole DOM (but 95% of item are the same ! )

One of the possible approach is to set "track by" expression for example to item.id. But here comes another problem, I also want regenerate items when for example descriptions was changed by other user. Since track by is expression to item.id changes in item.description didn't update item in DOM.

There is way to track by over multiple properties? Maybe some function? Or maybe do comparison by "hand" ?

Any ideas, code samples I would appreciate :)

UPDATE

what I discover when I set track by to item.id angular didn't re-crete html for items, just update value in already created element and it seems to be "faster" then removing and creating. Previously I though a little bit different.

FIX

For those who are looking for better performance over >1k items in ng-repeat USE track by item.id it will boost your performance ;)

Answer

Pedro Justo picture Pedro Justo · Mar 11, 2016

You do not need to create a function to handle track by multi properties. You can do:

<div ng-repeat="item in lines track by item.id+item.description">

Related questions

AngularJS For Loop with Numbers & Ranges

Angular does provide some support for a for loop using numbers within its HTML directives: <div data-ng-repeat="i in [1,2,3,4,5]"> do something </div> But if your scope variable includes a range that has a dynamic number then …

Read More
How to iterate over the keys and values with ng-repeat in AngularJS?

In my controller, I have data like: $scope.object = data Now this data is the dictionary with keys and values from json. I can access the attribute with object.name in the template. Is there any way that I can …

Read More
Way to ng-repeat defined number of times instead of repeating over array?

Is there a way to ng-repeat a defined number of times instead of always having to iterate over an array? For example, below I want the list item to show up 5 times assuming $scope.number equal to 5 in addition incrementing …

Read More