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。

使用一列

1 个答案: