如何让AngularJS ng-repeat的filter作用于原始数据集而非分页后数据？

这个问题我之前做AngularJS项目时也碰到过，其实完全不用自定义Filter，只要把过滤、排序的步骤放到分页之前，就能实现基于原始全量数据的搜索了！

核心问题分析 #

你当前的逻辑是：原始数据 → 分页得到当前页数据 → 过滤当前页数据，所以搜索只能覆盖当前页。而我们需要的逻辑是：原始数据 → 全量过滤/排序 → 对过滤后的结果分页，这样搜索就会作用于所有原始数据，再把匹配的结果分页展示。

具体实现步骤 #

1. 注入$filter服务到控制器
   首先要确保你的控制器里注入了Angular内置的$filter服务，这样才能在代码里手动调用filter和orderBy：

   app.controller('YourRateController', ['$scope', '$filter', function($scope, $filter) {
       // 你的其他代码（比如list_data、currentPage、numPerPage的初始化）
   }]);
   

2. 修改数据处理的监听逻辑
   把原来只监听currentPage的逻辑，改成同时监听search、sortType、sortReverse这些会影响结果的变量，然后按照「过滤→排序→分页」的顺序处理：

   $scope.$watchGroup(['search', 'currentPage', 'numPerPage', 'sortType', 'sortReverse'], function() {
       // 第一步：用search过滤原始全量数据list_data
       let filteredData = $filter('filter')($scope.list_data, $scope.search);
       
       // 第二步：对过滤后的结果进行排序（如果需要的话）
       filteredData = $filter('orderBy')(filteredData, $scope.sortType, $scope.sortReverse);
       
       // 第三步：对过滤+排序后的结果做分页
       const begin = ($scope.currentPage - 1) * $scope.numPerPage;
       const end = begin + $scope.numPerPage;
       $scope.filteredPages = filteredData.slice(begin, end);
       
       // 可选：更新总条目数，方便分页控件显示（比如页码总数）
       $scope.totalFilteredItems = filteredData.length;
   });
   

3. 保持ng-repeat的代码不变
   你的HTML部分完全不用改，因为现在filteredPages已经是「全量过滤+排序后分页」的结果了：

   <tr ng-repeat="rate in filteredPages">
       <td data-title="'location'">{{rate.location}}</td>
       <td data-title="'code'">{{rate.code}}</td>
       <td data-title="'peak_charge'">{{rate.charge_peak}}</td>
       <td data-title="'offpeak_charge'">{{rate.charge_offpeak}}</td>
       <td data-title="'connnection_charge'"> {{rate.connection_charge}}</td>
   </tr>
   

为什么这个方案可行？ #

通过手动调用$filter服务，我们把过滤和排序的操作提前到了分页之前，这样所有的搜索和排序都是基于原始的list_data全量数据进行的，最后再把符合条件的数据分页展示，完美解决了你只能搜索当前页的问题。

而且这种方式比自定义Filter更简洁，复用了Angular内置的功能，维护起来也更方便。

内容的提问来源于stack exchange，提问作者Kyle