current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.4 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 17 down vote favorite

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

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

share|improve this question
up vote 29 down vote accepted

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

share|improve this answer
    
thx Gruff Bunny – samibel Jan 30 '14 at 11:55
1  
This does not work. – Adam Arold Apr 22 '14 at 14:58
    
@AdamArold can you please explain where you think it doesn't work - have added a fiddle showing it working? – Gruff Bunny Apr 22 '14 at 15:33
    
@GruffBunny You saved my day bro.. thanks. – Naitik Dec 27 '14 at 6:27
    
I'd argue this logic should be implemented in a filter and not a $scoped function. – jKlaus 2 days ago
up vote 4 down vote

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>
share|improve this answer
3  
This solution is totally fine, as long as genres are assigned exclusive. Otherwise you could get doubled entries of a movie. – Daniel Aug 6 '14 at 18:40
    
I did operate under that assumption, given that was the case the OP stated. – jKlaus 2 days ago
up vote 3 down vote 
$filter('filter')(data,{type:'x'} && {type:'y'})

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

share|improve this answer
1  
super intuitive! :D – mccc Oct 19 '15 at 13:52
    
This was exactly I was looking for – Aruna Nov 16 '15 at 6:34
1  
Is Angular gonna RegEx this??? Looks like a Short-Circuit to type: 'y'. – Cody Jun 21 at 18:57
    
This made my jaw drop, only to find out it doesn't work; at least not in Angular 1.2+ – Scott Byers Aug 8 at 20:04
up vote 0 down vote

I Have the solution:

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;
        }
    }
  }
share|improve this answer
    
The code breaks at the line which updates term value. term is undefined. Would love to see that work! I need a custom filter cos I'm pretty sure there's a filter override on my default filter: function. – SinSync Apr 26 '14 at 20:18

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.