Wie mehrere Werte filtern (ODER-Operation) in AngularJS mit Ankreuzfeld

Question

Wie mehrere Werte filtern (ODER-Operation) in AngularJS mit Ankreuzleiste

<ul ng-repeat="movie in movies |filter:Filter.Comedy | filter:Filter.Action | filter:Filter.Drama"> 
    <li>{{movie.name}}</li> 
</ul> 
<label>Comedy</label><input type="checkbox" ng-model="Filter.Comedy" ng-true-value="Comedy" data-ng-false-value=''/><br/> 
<label>Action</label><input type="checkbox" ng-model="Filter.Action" ng-true-value="Action" data-ng-false-value=''/><br/> 
<label>Drama</label><input type="checkbox" ng-model="Filter.Drama" ng-true-value="Drama" data-ng-false-value=''/> 

http://jsfiddle.net/samibel/va2bE/1/

Answer 1

Verwenden einer Funktion Filter:

Ausblick:

<ul ng-repeat="movie in movies | filter: showMovie"> 
    <li>{{movie.name}}</li> 
</ul> 

Controller:

$scope.showMovie = function(movie){ 
    return movie.genre === $scope.Filter.Comedy || 
     movie.genre === $scope.Filter.Drama || 
     movie.genre === $scope.Filter.Action; 
}; 

Fiddle

Answer 2

Ich habe die Lösung:

http://jsfiddle.net/samibel/va2bE/17/

app.filter('searchFilter',function($filter) { 
     return function(items,searchfilter) { 
      var isSearchFilterEmpty = true; 
      //searchfilter darf nicht leer sein 
       angular.forEach(searchfilter, function(searchstring) { 
        if(searchstring !=null && searchstring !=""){ 
         isSearchFilterEmpty= false; 
        } 
       }); 

     if(!isSearchFilterEmpty){ 
       var result = []; 

       angular.forEach(items, function(item) { 
        var isFound = false; 
        angular.forEach(item, function(term,key) {       
         if(term != null && !isFound){ 
          term = term.toLowerCase(); 
           angular.forEach(searchfilter, function(searchstring) {  
            searchstring = searchstring.toLowerCase(); 
            if(searchstring !="" && term.indexOf(searchstring) !=-1 && !isFound){ 
             result.push(item); 
             isFound = true; 
             // console.log(key,term); 
            } 
           }); 
         } 
          }); 
         }); 
      return result; 
     }else{ 
     return items; 
     } 
    } 
    } 

Answer 3

ich etwas ähnliches wie dies in der Vergangenheit getan haben ..

<ul ng-repeat="movie in ((movies | filter:Filter.Comedy) + (movies | filter:Filter.Action) + (movies | filter:Filter.Drama))"> 
    <li>{{movie.name}}</li> 
</ul> 

Answer 4

$filter('filter')(data,{type:'x'} && {type:'y'}) 

Gibt Ihnen alle Elemente, die vom Typ x ODER des Typs y sind.