Using ng-If with ng-repeat for hiding unvisible items when displaying big collection

Issue

I have a big collection of items - ~2000 items.

When displaying with ng-repeat, the number of watchers is 16K and the DOM is barely alive.

I am trying to display the items in a table using ng-if, so that only visible items would be visible.

I have tried to implement infinite scrolling, but it does not solve the huge number of watchers. So I decided that it would be best if I just won't render the elements which are not visible.

Is there a query which I can put on every element that will fast tell me if the item is visible on the page?

My Code is:

<tr ng-repeat="mi in vm.displayDNAList track by $index">
 <span>{{ ::mi.name }}</span>
</tr>

Solution

With vast collections of items that render many DOM elements, even the most negligible processing of items inside an ng-repeat can choke your app. DOM-related solutions that check if elements are in view don't tell you if nested components have been loaded and rendered completely, leading to errors.

My solution to this problem is Angular's limitTo : limit: begin filter, along with iScroll or native scrollTop and scrollBottom callbacks, which raise or reduce the begin index in the controller according to the browse direction - sort of frontend pagination where only a specific number of items are shown at the DOM.

<tr ng-repeat="item in items | limitTo : 100 : 600 track by $index">
    <span>{{ item.name }}</span>
</tr>

You need to find the optimal limitTo number that works best for the app while keeping it light and agile.

Answered By - DotBot