angularjs 中的大型数据集搜索过滤器太慢

Question

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

 <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 函数计算分页的 pageindex（例如显示 100 个结果中的第 1 到 30 个）。即使我们删除 ng-change 也不确定在哪里计算过滤结果集的 pageindex。

非常感谢任何帮助。

谢谢

Answer 1

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

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

     });

angularjs 中的大型数据集搜索过滤器太慢

Search filter is too slow in angularjs with large dataset

html

javascript

angularjs

dirpagination