Hot to efficiently update list using AngularJS and ng-repeat

Question

Suppose I have a list of elements that display with $scope.items using ng-repeat . This list is quite large and is regularly updated, but only individual items are updated at the same time, for example. 12 updates for item 2, then 2 updates for item 359, then 89 updates for item 1071, etc.

From what I understand, updating individual elements in the $scope.items list will cause AngularJS to rename the full list, even if most of the elements haven't changed at all. This seems pointless and can certainly be handled more efficiently. I could use tools like jquery and update the DOM myself, but this seems to spoil the AngularJS point a lot. Is there a way in AngularJS to update individual list items in the ng-repeat generated model?

Answer 1

This will depend on how you configure the bindings and your updates. If you have a large list, 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 one part of the information that you need to update, send this atomic part of the information to the server, there is no reason to re-display the entire data set.

If you are interested or really want to place 10,000 elements on the screen at once, you have a viewing mode and an editing mode for the lines. You can use one-way snapping ( https://github.com/abourget/abourget-angular ) to render the read-only version, and in edit mode -. This will significantly increase the number of elements that you can display on the screen at any given time, while still allowing each element to be edited.

Answer 2

For people landing on this subject, like me. Check the "track" for the extension 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

amuses