使用一列的多个过滤器值过滤 ng-repeat 表

Question

我已经从对象数组生成了一个动态表，并使用 angular-ui-bootstrap 对行进行了分页。我还需要根据用户选择在表中实现行过滤器功能。例如，我会从复选框中选择一个或多个城市，并且只显示具有匹配城市的行，或者用户将选择某些名称，或两者的组合。以下是样本数据：

ctrl.data = [{
  id: 1,
  name: 'Ram Kumar',
  city: 'Delhi',
  date: new Date("October 13, 2014 11:13:00")
}, {
  id: 2,
  name: 'Raman Kumar',
  city: 'Mumbai',
  date: new Date("November 13, 2014 11:13:00")
}, {
  id: 3,
  name: 'Raghav Kumar',
  city: 'Chennai',
  date: new Date("December 13, 2014 11:13:00")
}];

我还创建了一个元数据，其中包含有关数据所有属性的信息，例如属性名称、唯一值、该属性需要的过滤器类型，即复选框或滑块。以下是元数据：

ctrl.metadata = [{
  name: "ID",
  values: [1, 2, 3],
  type: "checkbox",
  showFilter: false
}, {
  name: "Name",
  type: "checkbox",
  values: ["Ram Kumar", "Raman Kumar", "Raghav Kumar"],
  showFilter: false
}, {
  name: "City",
  type: "checkbox",
  values: ["Delhi", "Mumbai", "Chennai"],
  showFilter: true
}, {
  name: "Birth Date",
  type: "date",
  showFilter: false
}, {
  name: "Age",
  type: "slider",
  values: [18,26],
  showFilter: false
}];

我目前为一些属性（例如 ID、名称和城市）制作了一个单值静态过滤器查询变量。

<div ng-repeat="attr in metadata">
    <div ng-if="attr.name === 'ID'">
      Enter Filter:
      <input type="textbox" ng-model="search.id" />
    </div>

    <div ng-if="attr.name === 'City'">
      Enter Filter:
      <input type="textbox" ng-model="search.city" />
    </div>
<div>

我以这种方式将此过滤器应用于表格行：

  <tr ng-repeat="row in data | filter: search | pages: currentPage : itemsPerPage">
    <td ng-repeat="item in row">{{ item }}</td>
  </tr>

但首先，我希望动态生成过滤器查询变量（搜索），因为数据和元数据可能会发生变化。如果可能的话，如下所示：

<div ng-repeat="attr in metadata">
    <div ng-if="attr.name === 'ID'">
      Enter Filter:
      <input type="textbox" ng-model="attr.searchQuery" />
    </div>
</div>

我将搜索查询附加到名为 searchQuery 的元数据对象属性。但是当我尝试在过滤器中使用它时，我看不到任何结果：

  <tr ng-repeat="row in data | filter: metadata[$index].searchQuery | pages: vm.currentPage : vm.itemsPerPage">
    <td ng-repeat="item in row">{{ item }}</td>
  </tr>

其次，搜索查询只能接受一个字符串，但由于我希望过滤器基于多个值，我该如何实现呢？我研究了自定义过滤器，但问题是，如何“记录”选定的值，然后将其发送到过滤器（例如，从复选框中获取所有选定的城市）？我必须使每个变量成为动态变量或元数据的一部分，以便在更改属性数量或属性或值的名称时它不会中断。当数据发生变化时，可能没有城市，只有州，所以不能使任何东西成为静态的。

请提出一些实施想法。 Here is a working plunker.

Answer 1

首先您应该将您的<input> 更改为：

<input type="checkbox" ng-model="vm.selected[$index]" ng-true-value="'{{value}}'" ng-false-value="" /> {{value}}

那么你的ng-repeat:

<tr ng-repeat="row in vm.data | filter: vm.search | customFilter: vm.selected | pages: vm.currentPage : vm.itemsPerPage">

最后你可以实现一个custom filter 来实现你想要的，像这样：

.filter('customFilter', function() {
  return function(items, search) {
    if (!search || (Object.keys(JSON.parse(JSON.stringify(search))).length === 0 && search.constructor === Object)) {
      return items;
    }
    var selected = Object.keys(search).map(function(key) {
      return search[key]
    });
    items = items.filter(function(value) {
      return selected.indexOf(value.city) != -1;
    });
    return items;
  }
});

检查完整的code

希望对你有帮助。

提示：我不知道您是否在实际项目中使用ui-bootstrap 的这些东西，但它们已被弃用，正如您在控制台中看到的那样：

PaginationController 现已弃用。使用 UibPaginationController 反而。分页现在已弃用。请改用 uib-pagination。