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

Question

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/

Great job clarifying the OR operation. I had been browsing everywhere for something like this. — John Gonzalez
– John Gonzalez, Commented Oct 17, 2017 at 16:42

Gruff Bunny · Accepted Answer · 2014-04-22 15:31:43Z

35

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

edited Apr 22, 2014 at 15:31

answered Jan 28, 2014 at 21:32

Gruff Bunny

28k10 gold badges74 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Gruff Bunny Over a year ago

@AdamArold can you please explain where you think it doesn't work - have added a fiddle showing it working?

jKlaus Over a year ago

I'd argue this logic should be implemented in a filter and not a $scoped function.

John Gonzalez Over a year ago

This is great! So simple! Appreciate the Example

jKlaus · Accepted Answer · 2014-07-11 14:21:30Z

5

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>

answered Jul 11, 2014 at 14:21

jKlaus

3803 silver badges8 bronze badges

2 Comments

Daniel Over a year ago

This solution is totally fine, as long as genres are assigned exclusive. Otherwise you could get doubled entries of a movie.

jKlaus Over a year ago

I did operate under that assumption, given that was the case the OP stated.

Jeroen Rondeel · Accepted Answer · 2015-08-13 07:25:03Z

5

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

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

answered Aug 13, 2015 at 7:25

Jeroen Rondeel

2693 silver badges4 bronze badges

3 Comments

Aruna Over a year ago

This was exactly I was looking for

Cody Over a year ago

Is Angular gonna RegEx this??? Looks like a Short-Circuit to type: 'y'.

Scott Byers Over a year ago

This made my jaw drop, only to find out it doesn't work; at least not in Angular 1.2+

samibel · Accepted Answer · 2014-02-03 10:46:20Z

0

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

answered Feb 3, 2014 at 10:46

samibel

6842 gold badges6 silver badges20 bronze badges

1 Comment

SinSync Over a year ago

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.

Collectives™ on Stack Overflow

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

4 Answers 4

3 Comments

2 Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related