ng-repeat with track by over multiple properties

Question

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 1

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"> 

Answer 2

As the comment suggested you could try something like this:

<select ng-model="item" ng-options="item.id as item.description for item in items track by itemTracker(item)"> 

In your controller:

$scope.itemTracker= function(item) {   return item.id + '-' + item.description; } 

This might help with the number of DOM elements being re-rendered when the list changes.