如何用复选框过滤angularJS中的多个值(或操作)?

How to filter multiple values (OR operation) in angularJS with Checkbox

如何用复选框过滤angularJS中的多个值(或操作)?

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

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

4 个解决方案

#1

Use a filter function:

使用过滤功能:

View:

观点:

<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

小提琴

#2

I've done something similar to this in the past..

我过去也做过类似的事。

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

#3

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

Will give you all the items which are of type x OR of type y.

会给你所有类型为x或类型为y的项。

#4

I Have the solution:

我的解决方案:

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

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