複数の値を同じ条件でフィルタリングします

Question

これについての回答が見つかりませんでした。

は、私は色やテーマに基づいて、このリストをフィルタリングするには、このNGリピート

<li ng-repeat="books in bookList | filter:color | filter:theme"></li> 

そして、複数のボタンを持っていると言います。だから私がクリックすると

<a ng-click="color = {type: 1}">blue</a> 

私はすべての要素を青でフィルタリングします。

しかし、私は彼が望むようにユーザーをフィルタリングする必要があるので、彼は青と黄色でフィルタリングしたいとしましょう。それを行う方法はありますか？

Answer 1

次のようにカスタム多値フィルタを作成します：あなたは色のオブジェクトの代わりにフィルタリングする機能を渡すことができ

angular 
 
    .module("app", []) 
 
    .controller("DemoCtrl", function($scope){ 
 
    $scope.selectedColors = ["blue", "red"]; 
 
    $scope.selectedThemes = ["t1", "t2"]; 
 
    $scope.items = [ 
 
     { 
 
     color: "blue", 
 
     theme: "t1" 
 
     }, 
 
     { 
 
     color: "blue", 
 
     theme: "t2" 
 
     }, 
 
     { 
 
     color: "red", 
 
     theme: "t2" 
 
     }, 
 
     { 
 
     color: "yellow", 
 
     theme: "t3" 
 
     } 
 
    ]; 
 
    }) 
 
    .filter("multiValues", function(){ 
 
    return function(items, selectedValues, attrName) { 
 
     var result = []; 
 
     angular.forEach(items, function(item){ 
 
     if (selectedValues.indexOf(item[attrName]) > -1) { 
 
      result.push(item); 
 
     } 
 
     }); 
 
     return result; 
 
    } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="DemoCtrl"> 
 
    <div>Before Filtering:</div> 
 
    <ul ng-repeat="item in items"> 
 
    <li>{{item.color + " - " + item.theme}}</li> 
 
    </ul> 
 
    <div>Selected Colors: {{ selectedColors.join(", ") }}</div><br /> 
 
    <div>Selected Themes: {{ selectedThemes.join(", ") }}</div><br /> 
 
    <div>After Filtering:</div> 
 
    <ul ng-repeat="item in items | multiValues:selectedColors:'color' | multiValues:selectedThemes:'theme'"> 
 
    <li>{{item.color + " - " + item.theme}}</li> 
 
    </ul> 
 
</div>