具有大型数据集的 angularjs 中的搜索过滤器太慢答案

【问题标题】：Search filter is too slow in angularjs with large dataset具有大型数据集的 angularjs 中的搜索过滤器太慢
【发布时间】：2017-11-08 18:47:57
【问题描述】：

我有 AngularJs 客户端应用程序，它使用 dirPagination.js 的 dir-paginate 指令在表中显示数据。这是代码

 <input type="text"  ng-change="SomeTask()"   ng-model="vm.searchKeyword" />
<table cellpadding="0" cellspacing="0" border="0" class="display table" 
 id="indicatorsTable">
 <tbody style="border-bottom:1px solid black;">
  <tr dir-paginate="user in vm.Results| filter: vm.searchKeyword:false  
  |orderBy:orderByField:vm.reverseSort| itemsPerPage:30"  current-
   page="vm.current_page"  ng-class-odd="'indicatorTableBgColor'">
    </tr>
    </table>
     <div  class="right col-lg-6">
                                            <dir-pagination-controls 
     style="float:right;" max-size="7" on-page-
     change="vm.onPageChange(this)" boundary-links="true"  template-
     url="./app/indicator/dirPagination.tpl.html">
                                            </dir-pagination-controls>
                                        </div>

Javascript 控制器函数

 function GetDataFromBackEnd()
 {
    vm.Results=$http.GetData();
  }

 function SomeTask()
 {
   //do some task
  }

搜索需要花费大量时间，因为每次按键输入都会调用 ng-change 函数。当我在搜索功能中删除一个名字并输入一个新名字时，系统会延迟很长时间，比如 20 秒左右，以便系统赶上我的输入。

即使我将 dir-paginate 替换为 ng-repeat，性能也没有变化。

SomeTask 函数计算页面索引以进行分页（例如显示 100 个结果中的 1 到 30 个）。即使我们删除 ng-change 也不确定在哪里计算过滤结果集的 pageindex。

任何帮助将不胜感激。

谢谢

【问题讨论】：

你能预取你的数据（甚至是部分数据）并从ng-change上的存储数组中搜索吗？
你能解释一下吗？
而不是使用$http 服务或每次ng-change 触发时加载您的数据，这很慢，您应该只加载一次数据，然后从该预加载的数据中搜索跨度>
好的。但我没有在 ng-change 上加载数据，但有不同的任务要做。我只是使用 angularjs 的过滤器过滤器来搜索
您的过滤器必须优化

标签： javascript html angularjs dirpagination

【解决方案1】：

好的，我使用 $filter 服务解决了这个问题。我在搜索关键字上添加了 $watch，然后搜索了该关键字。

     $scope.$watch('vm.searchKeyword', function (term) {
        if (term != null && term != '') {             
            vm.Results = $filter('filter')(vm.orignalResults, term);
            }

     });

【讨论】：