CODEWITHSUNDEEP
javascriptangularjsrest
thesaint
thesaint

Reputation: 1281

AngularJS: Differential REST update to avoid flashing?

I have an array of Device objects which is fetched regularly from a REST server using $resource. Whenever this happens, the UI gets "reloaded", meaning the ng-repeat for this device array is executed again. The DOM update is annoying, because it screws up the current user interaction with devices. Instead I want the newly fetched Device array to update the existing one only WHERE stuff has changed. So if I get a fresh Device array, and there was only a name change in one of the 10 devices, then only that single data binding for that name of this one device shall incur a DOM update.

I couldn't find a method of doing this. Since it seems a common problem to me, I wanted to ask before writing my own "mergeUpdate" method which basically just does a deep-compare-replace operation and only write the things into the existing binding that actually have changed on the server-side.

Note that each device is uniquely identified by an id, thus this algorithm is possible at all. Without this id field it would not work (probably the reason why there is no generic method supplied with AngularJS).

Actually, angular.equals is a partial solution. Now I want something that can at least transfer modified properties too, without invalidating the whole array.

Thanks!

Upvotes: 0

Views: 78

Answers (1)

Joe Enzminger
Joe Enzminger

Reputation: 11190

What you are looking for is "track by" for ngrepeat. In your case, 

<div ng-repeat="item in items track by item.id"></div>

With this, ngrepeat will keep track of existing items and not rerender them. The merge logic is internal to ngrepeat.

Upvotes: 2

Related Questions