使用 select 进行多重过滤并在表格上显示结果答案

【问题标题】：Multi filter using select and show the result on table使用 select 进行多重过滤并在表格上显示结果
【发布时间】：2017-03-26 11:54:40
【问题描述】：

我有这个简单的表格，想用多项选择过滤它，以便使用多个过滤器显示结果，例如类型：顶部和低。

我尝试了一些库，例如 Select UI，但没有得到好的结果。请帮忙。

<label>Type:</label>
<select ng-model="filterType" ng-options="item.type as item.type for item in samples | unique:'type'">
  <option value="">Select</option>
</select>


<table class="table">
  <tr>
    <th>#</th>
    <th>Name</th>
    <th>Type</th>
    <th>Status</th>
  </tr>

  <tr ng-repeat="item in samples | filter:filterType">
    <td>{{item.id}}</td>
    <td>{{item.name}}</td>
    <td>{{item.type}}</td>
    <td>{{item.status}}</td>
  </tr>
</table>

Fiddle

【问题讨论】：

标签： angularjs

【解决方案1】：

我使用了ui-select 并想出了解决方案。方法如下。

为ui-select添加了这个HTML块：

<ui-select multiple ng-model="selected.items" theme="bootstrap">
  <ui-select-match placeholder="Select types...">{{$item}}</ui-select-match>
  <ui-select-choices repeat="type in types">
    <div ng-bind="type | highlight: $select.search"></div>
  </ui-select-choices>
</ui-select>

对于repeat="type in types"，我过滤了samples 数组，以便获得所有唯一类型（也使用了您包含的unique 过滤器！）：

$scope.types = $filter('unique')($scope.samples, 'type')
  .map(function(item) {
    return item.type
  }) // ["Average", "Medium", "Top", "Low"]

最后是ng-repeat。为了根据选择过滤行，我使用了自定义过滤器。所以，

<tr ng-repeat="item in samples | filter:customFilter">

而且，customFilter 函数会变成这样：

$scope.customFilter = function(obj) {
  if (!$scope.selected.items.length) return true
  return $scope.selected.items.indexOf(obj.type) > -1
}

而且，我们完成了！这是一个有趣的！ :)

Here's working fiddle

【讨论】：

【解决方案2】：

你可以像这样制作多个过滤器：

<tr ng-repeat="item in samples  | filter:{status: filterStatus, type: filterType} ">

【讨论】：