CODEWITHSUNDEEP
angularjs
GrahamB
GrahamB

Reputation: 569

Preventing an ng-repeat redrawing entire row

If you check the following jsfiddle you will see an example of a problem I am having.

http://jsfiddle.net/Yram7/1/

My problem is that when an ng-repeat has a very simple data type driving it such as an array of numbers, eg [1..10] when the array is updated, angularjs somehow knows the data valuse have not changed, and hence does not redraw the row DOM. This means that pieces of UI such as a dropdown box can be used in combination with a setInterval causing the data to refresh.

All is good.

However if I change the data structure behind the ng-repeat to contain complex objects, eg [{"i" : 1}..{"i" : 10}]angularjs redraws the row entirely (even though the values HAVEN'T changed although of course the object references have) and hence if a drop down was selected, the html is destroyed by repainting the row, and hence a poor UI experience as the user selection is not preserved.

Try fiddling with the select options and clicking the drop down arrow to see what I mean.

Is it possible to somehow prevent this behaviour so that the DOM only redraws if it finds some kind of change in the row data values?

Upvotes: 0

Views: 922

Answers (1)

Nikos Paraskevopoulos
Nikos Paraskevopoulos

Reputation: 40298

In your fiddle, you are using ant antique version of Angular. More recent versions have the track by clause in ng-repeat (docs).

Here is your fiddle forked that implements it with the track by and it works: http://jsfiddle.net/BFFJn/

The track by clause will associate the iterated object's identity with the DOM, so that when a (possibly different) object with the same id is found, the DOM is updated, not replaced. If no track by is given, object equality is used.

Upvotes: 4

Related Questions