Question

我有这个简单的表，想要用多个选择过滤它，以便用多个过滤器显示结果，例如Type：Top和Low。

我尝试了一些库，例如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

Answer 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

Answer 2

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

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

使用select的多重过滤器并在表格上显示结果

2 个答案: