4

Lets assume I have a list of items that are rendered from $scope.items using ng-repeat. This list is fairly large and updated regularly, but only single items are updated at a time, eg. 12 updates on Item 2, then 2 updates on Item 359, then 89 updates on Item 1071, etc.

From what I understand, updating the single items in $scope.items list will cause AngularJS to rerender the complete list, even if most items have not changed at all. This seems like a pointless thing and can surely handled in a more efficient way. I could use tools like jquery and update the DOM myself, but that seems to defeat the point of AngularJS in a big way. Is there any way in AngularJS to update single list elements in an ng-repeat generated model?

user2035365
  • 83
  • 1
  • 4
  • theoretical question or performance related? – charlietfl Mar 10 '13 at 13:54
  • Theoretical question and scalability related. – user2035365 Mar 10 '13 at 14:01
  • not sure what issue is. Here's 3000 items within `ng-repeat` that live update with no issues. http://jsfiddle.net/5MKY6/ I think you have oversimplified angular's capabilities – charlietfl Mar 10 '13 at 14:18
  • The Problem is that if you increase that to 10000 or maybe just 5000 on a not so fast machine with a not so fast javascript engine, you will see a definite performance impact when updating single values. – user2035365 Mar 10 '13 at 14:24
  • Interfaces are not supposed to handle 3000 or 10000 (editable) items at once. That's what pagination, lazy loading, or [progressive disclosure](http://en.wikipedia.org/wiki/Progressive_disclosure) are for. Single-page apps are not supposed to mimic databases. That said, you will not have scalability problems with Angular (or any other JS framework) if you keep your numbers "human-friendly". You can learn more about this in [this answer from Misko Hevery](http://stackoverflow.com/a/9693933/1095616). – Stewie Mar 10 '13 at 15:22

2 Answers2

2

This would depend on how you are setting up your bindings and your updates. If you have a large list, do an update, send to the server and replace the entire list with the return from the server, yes, you are going to re-render. But if you just update the one piece of information you need to update, send that atomic piece of information to the server, there is no reason to re-render the entire set of data.

If you are concerned or really want to put 10,000 items on screen at once, have a view mode and edit mode for the rows. You can use one-way binding (https://github.com/abourget/abourget-angular) to render the read-only version and when in edit mode, display a form with two-way binding. This would significantly increase the number of items you can show on screen at any given time while still allowing you to edit each item.

Jason Aden
  • 2,823
  • 1
  • 18
  • 13
2

For people landing on this topic like I did. Check out the 'track by' augmentation of the ngRepeat directive.

http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm https://docs.angularjs.org/api/ng/directive/ngRepeat

cheers

David
  • 201
  • 2
  • 8