在oi-select中加载大数组会在angularjs中花费太多时间 [英] loading large array in oi-select takes too much of time in angularjs

问题描述

我正在使用oi-select库，我已根据我的项目需要对其进行了定制，并且我已经为它编写了指令。问题是它花了太多时间说10秒加载大约3k阵列数据。我想尽量缩短它的时间。在这里，我为此创建了 plunker 。

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.

我有指令加载所有工厂数据并将其提供给oi-select，在我的代码中这里是html

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代码如下所示

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>

角度代码太大了，在这个问题中请不要提及plunker，但这就是它循环的方式

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.

编辑
现在我已经用ng-repeat中的limitTo编辑了我的plunker，为此我写了新的指令，当滚动到达底部时会触发addmoreitems功能。 updatedPlunker

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

现在的问题是，当我输入并搜索其搜索内容时，只搜索有关限制的可用记录在所有数据中，现在说limitTo为50，那么搜索只发生在不在3k记录中的50个记录中。

推荐答案

正确执行此类要求的方法是使用 分页 ，因为从服务器端加载数据，你应该让你的api支持分页。

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 将无法帮助您进行搜索，因为您限制了搜索结果。

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

这篇关于在oi-select中加载大数组会在angularjs中花费太多时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！