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

Question

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

角度代码太大了,在这个问题中请参考plunker,但这是如何循环

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

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

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

现在的问题是,当我打字并搜索其搜索内容时,只搜索有关限制的可用记录,而不是搜索所有数据,现在说limitTo为50,那么搜索只发生在不是3k记录的50条记录中.

Answer 1

正确的做这种要求的方法是pagination,因为你从服务器端加载数据,你应该让你的api支持分页.

它应该接受三个参数,如number of items,start,limit和您最初应该得到的项目数和重复,直到你得到整个结果集.

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

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

Answer 2

问题不在于数组，浏览器可以轻松处理这个问题，问题是你要渲染所有 3k DOM 元素，即使对于实际机器来说，这也是一项繁重的工作，而且因为它们所在的每个 dom 元素中都有{{}}绑定在 AngularJs 的观看中，我遇到了同样的问题，并使用AngularJS Material 中的 Virtual Repeat解决了这个问题，它的作用是它不会渲染由 ng-repeat 生成的整个 3k DOM 元素，而是只渲染可见的元素，如果您不想使用 Angular Material，我还找到了另一个库，这似乎以相同的方式工作：Angular VS-Repeat