javascript - 在 oi-select 中加载大数组在 angularjs 中花费太多时间

Question

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

我有加载所有工厂数据并将其提供给 oi-select 的指令，在我的代码中这里是 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 代码如下所示

<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;
                }
            };

我想要类似的东西，它会在滚动时加载部分数据，它会加载更多数据，我们将不胜感激。非常感谢。

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

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

Answer 1

完成这种要求的正确方法是使用分页，因为您是从服务器端加载数据，所以您应该让您的 api 支持分页。

它应该接受三个参数，例如 number of items, start, limit 并且您应该首先获取项目的数量并重复它直到获得整个结果集。

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

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