current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 4 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

3 Answers 3

up vote 10 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
    
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
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
up vote 1 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
1  
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

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.