如何使用复选框在angularJS中过滤多个值（或运算）答案

【问题标题】：How to filter multiple values (OR operation) in angularJS with checkbox如何使用复选框在angularJS中过滤多个值（或运算）
【发布时间】：2014-02-20 02:40:06
【问题描述】：

如何在angularJS中使用Checkbox过滤多个值（OR运算）

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

【问题讨论】：

很好地阐明了 OR 操作。我一直在到处寻找类似的东西。

标签： angularjs angularjs-filter

【解决方案1】：

使用过滤功能：

查看：

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

控制器：

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

Fiddle

【讨论】：

@AdamArold 你能解释一下你认为它在哪里不起作用 - 已经添加了一个显示它工作的小提琴吗？
我认为这个逻辑应该在过滤器而不是 $scoped 函数中实现。
这太棒了！很简单！欣赏例子

【解决方案2】：

我有办法：

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

【讨论】：

代码在更新term 值的行处中断。 term 未定义。很想看到这项工作！我需要一个自定义过滤器，因为我很确定我的默认 filter: 函数上有一个过滤器覆盖。

【解决方案3】：

我过去做过类似的事情..

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

【讨论】：

这个解决方案完全没问题，只要流派被指定为独占。否则，您可能会获得双倍的电影条目。
鉴于 OP 所述的情况，我确实在该假设下进行了操作。

【解决方案4】：

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

将为您提供所有 x 类型或 y 类型的项目。

【讨论】：

这正是我要找的
Angular 会 RegEx 吗？？？看起来像是对type: 'y' 的短路。
这让我惊掉下巴，却发现它不起作用；至少在 Angular 1.2+ 中没有