Voltaire John Secondes Biton Voltaire John Secondes Biton - 3 months ago 13
HTML Question

AngularJS - How to stop ng-repeat when it reaches the last item on object

I ng-repeat a huge object and is working fast on chrome and opera. but on browsers like mozilla and IE, it is very very slow. I tried using pagination and it helped but i would want to display all the items on load instead of paginating them. So i came up with the idea if it is possible to stop ng-repeat from listening to the object after executing the last item on the object.

But it should not remove the html elements that it rendered.

And if the object was changed it should rerun the ng-repeat again and will stop on the last item.

From what i know about ng-repeat, it keeps on looping the object infinitely, so that could be the reason why IE and Mozilla is slow at loading them when the object is too large.

So is this possible to stop ng-repeat?

Answer

If your collection isn't changing at all, ngRepeat shouldn't be changing the DOM. You should profile carefully, to make sure the problem is what you think it is.

In the documentation (https://docs.angularjs.org/api/ng/directive/ngRepeat),

ngRepeat uses $watchCollection to detect changes in the collection. When a change happens, ngRepeat then makes the corresponding changes to the DOM:

When an item is added, a new instance of the template is added to the DOM.

When an item is removed, its template instance is removed from the DOM.

When items are reordered, their respective templates are reordered in the DOM.

It isn't possible to prevent this, and $watchCollection (I believe) has to iterate through your collection to see if anything has been reordered.

It also doesn't look like it's possible to 'turn off' the watch while still using ngRepeat.

If you don't want to use $watchCollection as your mechanism for detecting changes, you might have to create your own dirty checking/trigger, and generate the DOM yourself.

Comments