loading large array in oi-select takes too much of time in angularjs

Question

I am using oi-select library, i have customized it according to my project need and i have written directive for it. The problem is its taking too much of time say 10secs to

Answer 1

You may try the limitTo filter in ng-repeat in angularjs which takes the additional argument to start the iteration.

https://docs.angularjs.org/api/ng/filter/limitTo

On scroll, you can then change that argument based on the number of items pending or left for rendering or the number of items already rendered. This should help you in approach of selective loading of data on scroll.

Answer 2

The problem is not the array, the browser can easly handle that, the problem is that you're rendering all the 3k DOM elements, that's really heavy work even for an actual machine, also since there is bindings in each dom element {{}} they're being watching by AngularJs, I got the same problem and solved using Virtual Repeat from AngularJS Material, what this does is it doesn't render the whole 3k DOM elements generated by the ng-repeat, instead it just renders the ones that are visible, also I've found another library if you don't want to use Angular Material, this seems to work the same way: Angular VS-Repeat

Answer 3

Correct way of doing this kind of requirement is to do with pagination, since you are loading data from the server side, you should make your api to support pagination.

It should accept three parameters such as number of items, start, limit and you should initially get the number of items and repeat it until you get the whole result set.

There should be another request to get the total number of items. By doing this you can retrieve all the elements at once loaded in the client side. Until that you should have a loading indicator, or you could load this data when the login process/application starts.

limitTo will not be able to help with the search , because you are limiting the results.