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

问题描述

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

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

select {{MPhardwaresListDropDown.length}}<div style="padding-top: 7px"><div title="" class="selected-multiple-items">{{MPselectedHardwares.length}} 已选择

<grid-multi-select id="hardwareId" clean="clean" optionlist="MPhardwaresListDropDown" colval="name"></grid-multi-select>

指令中的 HTML 代码看起来像

<div ng-repeat="tempOptionList 中的optionVal | 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>
<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>

角度代码太大，无法在此问题中提及请参考plunker，但这就是它的循环方式

scope.selection = scope.selectionorg;scope.checkedall=scope.checkedallorg;scope.OptionList=parentScope[scope.parentListName].sort();scope.tempOptionList=[];变量 i=0;for(i=0;i0) {angular.forEach(scope.optionListSelectedList, function(obj){angular.forEach(scope.tempOptionList, function(obj1){if(obj====obj1.val){obj1.check=true;obj1.originalcheck=true;}});});}别的{scope.checkedall=false;}};

我想要一些类似的东西，它会在滚动时加载部分数据，它会加载更多数据，任何帮助将不胜感激.非常感谢.

编辑现在我用 ng-repeat 中的 limitTo 编辑了我的 plunker，为此我编写了新指令，当滚动到达底部时将触发 addmoreitems 函数. updatedPlunker

现在的问题是，当我输入和搜索某些内容时，它只在可用记录中搜索与 limitTo 相关的内容，而不是在所有数据中搜索，假设现在 limitTo 是 50，然后搜索只发生在 50 条记录中，而不是 3k记录.

解决方案

做这种需求的正确方式是分页，因为你正在加载数据从服务器端，你应该让你的api支持分页.

它应该接受三个参数，例如项目数、start、限制，你应该首先得到项目的数量，然后重复它，直到你得到整个结果集.

应该有另一个请求来获取项目的总数.通过这样做，您可以一次检索在客户端加载的所有元素.在此之前，您应该有一个加载指示器，或者您可以在登录过程/应用程序启动时加载此数据.

limitTo 将无法帮助搜索，因为您限制了结果.

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.

解决方案

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.

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