AngularJS: ng-repeat with dynamic list, without rebuilding entire DOM tree?

Question

I\'m using ng-repeat on a table row with data from a JSON array retrieved from a server. My goal is to have the list update automatically whenever an item is added, removed

Answer 1

For those finding this from google, the page below describes a feature in AngularJS 1.2 that helps with this problem:

http://www.bennadel.com/blog/2556-Using-Track-By-With-ngRepeat-In-AngularJS-1-2.htm

---

Edit to add: The most important sentences from the linked post, in case the link ever dies:

With the new "track by" syntax, I can now tell AngularJS which object property (or property path) should be used to associate a JavaScript object with a DOM node. This means that I can swap out JavaScript objects without destroying DOM nodes so long as the "track by" association still works.

Answer 2

I belive this article will explain how ngRepeat works

http://www.bennadel.com/blog/2443-Rendering-DOM-Elements-With-ngRepeat-In-AngularJS.htm

So if you are keeping objects in collection - then yes ( i e $hashKey persist )

Otherwise - no

Answer 3

I'm planning to build the following solution myself eventually though it's still in my product backlog.

The problem with ng-repeat is it will remove items from the DOM when it needs to so for a table it would mean it will resize and such, but if the data is dynamic, it may flicker because the data changed around and the table size is shifting. Particularly during paging because the whole page may not have loaded yet.

To get around this flickering, the table must not change its number of rows. Instead have an ng-repeat of "displayed" data and just change it as needed without adding or removing items from the array.