在oi-select中加载大数组会在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 load around 3k array data. I want to minimize the time for it. Here I have created plunker for this.

I have directive which loads all factory data and provides it to oi-select, in my code here is html

<small><b>select {{MPhardwaresListDropDown.length}}</b></small>
                        <div style="padding-top: 7px">
                            <div title="" class="selected-multiple-items">
                                    {{MPselectedHardwares.length}} selected
                            </div>
                            <grid-multi-select id="hardwareId" clean="clean" optionlist="MPhardwaresListDropDown" colval="name"></grid-multi-select>
                        </div>

HTML code in directive looks like

<div>
        <div ng-repeat="optionVal in tempOptionList | orderBy : ['-originalcheck','+label']" prevent-close>
            <div ng-if="optionVal.label">
                <label class="checkbox" ng-if="!typeFilterOptions || (optionVal.label.toString().toLowerCase().indexOf(typeFilterOptions.toLowerCase()) > -1)">
                    <input type="checkbox" name="checkbox1" ng-checked="optionVal.check" ng-model="optionVal.check"/>

                    <span class="checkbox__input"></span>
                    <span class="checkbox__label" style="color:#A9A9A9;">{{optionVal.label}}</span>
                </label>
            </div>
            <div ng-if="!optionVal.label">
                <label class="checkbox" ng-if="!typeFilterOptions || (optionVal.val.toString().toLowerCase().indexOf(typeFilterOptions.toLowerCase()) > -1)">
                    <input type="checkbox" name="checkbox1" ng-checked="optionVal.check" ng-model="optionVal.check" ng-change="checking(typeFilterOptions)"/>

                    <span class="checkbox__input"></span>
                    <span class="checkbox__label" style="color:#A9A9A9;">{{optionVal.val}}</span>
                </label>
            </div>



        </div>

angular code is too big to mention in this question please refer plunker, but this is how it loops

scope.selection = scope.selectionorg;
                scope.checkedall=scope.checkedallorg;
                scope.OptionList=parentScope[scope.parentListName].sort();
                scope.tempOptionList=[];
                var i=0;
                for(i=0;i<scope.OptionList.length;i++) {
                    scope.tempOptionList[i] = {val: scope.OptionList[i], check: false, originalcheck: false};
                }
                if(scope.optionListSelectedList.length>0) {
                    angular.forEach(scope.optionListSelectedList, function(obj){
                        angular.forEach(scope.tempOptionList, function(obj1){
                            if(obj===obj1.val){
                                obj1.check=true;
                                obj1.originalcheck=true;
                            }
                        });
                    });
                }
                else{
                    scope.checkedall=false;
                }
            };

I want something like which will load partial data on scroll it loads more data, any help will be appreciated. Thank you so much.

EDIT Now i have edited my plunker with limitTo in ng-repeat, for that i have written new directive which will trigger addmoreitems function when scroll will reach bottom. updatedPlunker

Now problem is when i am typing and searching something its searching in only available records with respect to limitTo its not searching in all data, say now the limitTo is 50 then search is happening only in 50 records not in 3k records.

Answer 1

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.

Answer 2

问题不在于数组，浏览器可以轻松处理，问题在于你渲染了所有3k DOM元素，即使对于实际的机器也是如此繁重，因为每个dom元素中都有绑定{{}}他们正在通过AngularJs看，我得到了同样的问题，解决了使用从AngularJS材质虚拟重复 ，这样做是不使被NG重复产生的整个3K DOM元素，而不是它只是呈现的那些这是可见的，如果你不想使用Angular Material，我也找到了另一个库，这似乎也是一样的： Angular VS-Repeat

Answer 3

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.