AngularJS中能否同时为同一表格使用orderBy与filter？

当然可以呀！在AngularJS里，你完全可以把filter过滤器和现有的orderBy功能结合起来，让表格同时支持搜索过滤和排序。我来一步步教你实现：

步骤1：添加过滤输入框 #

在表格上方加一个搜索输入框，用ng-model绑定到控制器的变量，用来接收用户的搜索关键词：

<div class="mb-3">
  <input 
    type="text" 
    ng-model="$ctrl.searchText" 
    placeholder="搜索名称或类型..." 
    class="form-control"
  >
</div>

步骤2：修改ng-repeat，结合Filter和OrderBy #

只需要在原有的orderBy过滤器前加上filter即可，注意先过滤再排序的顺序（这样会先过滤出符合条件的数据，再对结果排序，性能更优）：

<table class="table table-striped top-scroll__content">
  <thead>
    <tr>
      <th ng-click="$ctrl.sorting('Name')">Name</th>
      <th ng-click="$ctrl.sorting('Type')">Occurence</th> <!-- 注意这里表头是Occurence，对应数据字段是Type？要确保字段名匹配哦 -->
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in $ctrl.alertsResponse | filter:$ctrl.searchText | orderBy:$ctrl.sort.active:$ctrl.sort.descending track by $index">
      <td>{{row.Name}}</td>
      <td>{{row.Type}}</td>
    </tr>
  </tbody>
</table>

可选：按特定字段精准过滤 #

如果不想全局过滤所有字段，只想针对某一列（比如只过滤Name），可以把filter改成对象形式，指定要过滤的字段：

<!-- 仅过滤Name列 -->
<tr ng-repeat="row in $ctrl.alertsResponse | filter:{Name: $ctrl.searchText} | orderBy:$ctrl.sort.active:$ctrl.sort.descending track by $index">

要是需要多字段独立过滤，还可以加多个输入框：

<div class="mb-3 d-flex gap-2">
  <input 
    type="text" 
    ng-model="$ctrl.nameFilter" 
    placeholder="搜索名称..." 
    class="form-control flex-grow-1"
  >
  <input 
    type="text" 
    ng-model="$ctrl.typeFilter" 
    placeholder="搜索类型..." 
    class="form-control flex-grow-1"
  >
</div>

<!-- 多字段同时过滤 -->
<tr ng-repeat="row in $ctrl.alertsResponse | filter:{Name: $ctrl.nameFilter, Type: $ctrl.typeFilter} | orderBy:$ctrl.sort.active:$ctrl.sort.descending track by $index">

控制器的小补充 #

如果你的控制器还没初始化过滤变量，可以加上这些代码（和你原有的排序逻辑兼容）：

angular.module('yourAppModule').controller('YourController', function() {
  const vm = this;

  // 原有的排序配置（你应该已经有这段了）
  vm.sort = {
    active: 'Name',
    descending: false
  };

  // 初始化过滤变量
  vm.searchText = '';
  // 如果是多字段过滤的话：
  // vm.nameFilter = '';
  // vm.typeFilter = '';

  // 原有的排序方法（你应该已经实现了）
  vm.sorting = function(sortBy) {
    if (vm.sort.active === sortBy) {
      vm.sort.descending = !vm.sort.descending;
    } else {
      vm.sort.active = sortBy;
      vm.sort.descending = false;
    }
  };
});

这样一来，你的表格就能同时支持实时搜索过滤和点击表头排序的功能啦，两种操作互不影响~

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