selectを使用し、テーブルに結果を表示するマルチフィルタ

Question

この単純なテーブルを持ち、複数のフィルタを使用して結果を並べ替える場合は、タイプ：上および下などのフィルタを使用します。

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ブロック：

： repeat="type in types"ため

<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> 

、私はすべてのユニーク種類（！あまりにもあなた含まuniqueフィルタを使用）を取得ようにsamples配列をフィルタリング

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

最後に、ng-repeat。選択に基づいて行をフィルタリングするには、カスタムフィルタを使用しました。

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

をそして、我々は行われています。だから、

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

そして、customFilter機能は、このような何かを行くだろう！それは面白かった！ :)

Here's working fiddle

Answer 2

あなたはそのように複数のフィルタを行うことができます。

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