Rectangle 27 1

javascript How to filter multiple values (OR operation) in angularJS?


$filter('orFilter')([{..}, {..} ...], {arg1, arg2, ...}, false)
Note
Rectangle 27 1

javascript How to filter multiple values (OR operation) in angularJS?


<tr ng-repeat="supp in $data | filter : filterObject |  filter : search">

But if you wanted to something like Filter by individual Property and Filter globally for all properties then you can do something like this.

If you want to filter on array of Object then you can give filter:({genres: 'Action', key :vaule }.

Note
Rectangle 27 1

javascript How to filter multiple values (OR operation) in angularJS?


filter:({genres: 'Action', genres: 'Comedy'}

Does this not just filter on 'Comedy'?

I tried this and it only filters on 'Comedy', not on 'Action'.

Note
Rectangle 27 1

javascript How to filter multiple values (OR operation) in angularJS?


<div>{{ (collection | fitler1:args) + (collection | filter2:args) }}</div>

I believe this is what you're looking for:

Note
Rectangle 27 1

javascript How to filter multiple values (OR operation) in angularJS?


<h1>Movies</h1>

<div ng-init="movies = [
          {title:'Man on the Moon', genre:'action'},
          {title:'Meet the Robinsons', genre:'family'},
          {title:'Sphere', genre:'action'}
       ];" />
<input type="checkbox" ng-model="genrefilters.action" />Action
<br />
<input type="checkbox" ng-model="genrefilters.family" />Family
<br />{{genrefilters.action}}::{{genrefilters.family}}
<ul>
    <li ng-repeat="movie in movies | bygenre:genrefilters">{{movie.title}}: {{movie.genre}}</li>
</ul>
angular.module('myFilters', []).
  filter('bygenre', function() {
    return function(movies,genres) {
      var out = [];
      // Filter logic here, adding matches to the out var.
      return out;
    }
  });

I would just create a custom filter. They are not that hard.

Sorry it took me awhile to get back. I updated my answer with a fiddle of a concrete example.

UPDATE: Here is a fiddle that has an exact demo of my suggestion.

ok, thanks, in the meantime I figured it out myself, but it will sure help someone later :)

so then in the out I return the movie objects that I want to display?

Note
Rectangle 27 1

javascript How to filter multiple values (OR operation) in angularJS?


arrayOfObjectswithKeys | filterMultiple:{key1:['value1','value2','value3',...etc],key2:'value4',key3:[value5,value6,...etc]}
myApp.filter('filterMultiple',['$filter',function ($filter) {
return function (items, keyObj) {
    var filterObj = {
        data:items,
        filteredData:[],
        applyFilter : function(obj,key){
            var fData = [];
            if (this.filteredData.length == 0)
                this.filteredData = this.data;
            if (obj){
                var fObj = {};
                if (!angular.isArray(obj)){
                    fObj[key] = obj;
                    fData = fData.concat($filter('filter')(this.filteredData,fObj));
                } else if (angular.isArray(obj)){
                    if (obj.length > 0){
                        for (var i=0;i<obj.length;i++){
                            if (angular.isDefined(obj[i])){
                                fObj[key] = obj[i];
                                fData = fData.concat($filter('filter')(this.filteredData,fObj));    
                            }
                        }

                    }
                }
                if (fData.length > 0){
                    this.filteredData = fData;
                }
            }
        }
    };
    if (keyObj){
        angular.forEach(keyObj,function(obj,key){
            filterObj.applyFilter(obj,key);
        });
    }
    return filterObj.filteredData;
}
}]);

Here is a fiddle example with implementation of above "filterMutiple" custom filter. :::Fiddle Example:::

Here is the implementation of custom filter, which will filter the data using array of values.It will support multiple key object with both array and single value of keys. As mentioned inangularJS API AngularJS filter Doc supports multiple key filter with single value, but below custom filter will support same feature as angularJS and also supports array of values and combination of both array and single value of keys.Please find the code snippet below,

This does not work with JSON's with nested objects. Would've been ideal if it did. also it fires a length property undefined error in the console.

You seem to have the correct intention but your example doesn't seem to work as expected. The output in the table seems rather inconsistent.

Note
Rectangle 27 1

javascript How to filter multiple values (OR operation) in angularJS?


<li ng-repeat="x in array | filterMultiple:{key1: value1, key2:[value21, value22]}">{{x.name}}</li>
String.prototype.contains = function(str) {
  return this.indexOf(str) != -1;
};

String.prototype.containsAll = function(strArray) {
  for (var i = 0; i < strArray.length; i++) {
    if (!this.contains(strArray[i])) {
      return false;
    }
  }
  return true;
}

app.filter('filterMultiple', function() {
  return function(items, filterDict) {
    return items.filter(function(item) {
      for (filterKey in filterDict) {
        if (filterDict[filterKey] instanceof Array) {
          if (!item[filterKey].containsAll(filterDict[filterKey])) {
            return false;
          }
        } else {
          if (!item[filterKey].contains(filterDict[filterKey])) {
            return false;
          }
        }
      }
      return true;
    });  
  };
});

I wrote this for strings AND functionality (I know it's not the question but I searched for it and got here), maybe it can be expanded.

Note
Rectangle 27 1

javascript How to filter multiple values (OR operation) in angularJS?


$scope.users = [
 { first_name: 'Sharon', last_name: 'Melendez' },
 { first_name: 'Edmundo', last_name: 'Hepler' },
 { first_name: 'Marsha', last_name: 'Letourneau' }
];
<input ng-model="search" placeholder="search by full name"/> 
<th ng-repeat="user in users | searchField: 'first_name': 'last_name' | filter: search">
  {{ user.first_name }} {{ user.last_name }}
</th>
<!-- so now you can search by full name -->

You can also use "where" of angular.filter <tr ng-repeat="obj in collection | where:{id: 1}"> {{ obj.name }} </tr>

you can use searchField filter of angular.filter

Note
Rectangle 27 1

javascript How to filter multiple values (OR operation) in angularJS?


<h1>Movies</h1>

<div ng-init="movies = [
          {title:'Man on the Moon', genre:'action'},
          {title:'Meet the Robinsons', genre:'family'},
          {title:'Sphere', genre:'action'}
       ];" />
<input type="checkbox" ng-model="genrefilters.action" />Action
<br />
<input type="checkbox" ng-model="genrefilters.family" />Family
<br />{{genrefilters.action}}::{{genrefilters.family}}
<ul>
    <li ng-repeat="movie in movies | bygenre:genrefilters">{{movie.title}}: {{movie.genre}}</li>
</ul>
angular.module('myFilters', []).
  filter('bygenre', function() {
    return function(movies,genres) {
      var out = [];
      // Filter logic here, adding matches to the out var.
      return out;
    }
  });

Either i have two value such like active and inactive then how can i search seprately using this filter. we do not want to make custom filter.

I would just create a custom filter. They are not that hard.

Sorry it took me awhile to get back. I updated my answer with a fiddle of a concrete example.

UPDATE: Here is a fiddle that has an exact demo of my suggestion.

ok, thanks, in the meantime I figured it out myself, but it will sure help someone later :)

so then in the out I return the movie objects that I want to display?

Note
Rectangle 27 1

javascript How to filter multiple values (OR operation) in angularJS?


<div ng-controller="MoviesCtrl">
    <ul>
        <li ng-repeat="movie in movies | filter:filterByGenres">
            {{ movie.name }} {{ movie.genre }}
        </li>
    </ul>
</div>
function MoviesCtrl($scope) {

    $scope.movies = [{name:'Shrek', genre:'Comedy'},
                     {name:'Die Hard', genre:'Action'},
                     {name:'The Godfather', genre:'Drama'}];

    $scope.selectedGenres = ['Action','Drama'];

    $scope.filterByGenres = function(movie) {
        return ($scope.selectedGenres.indexOf(movie.genre) !== -1);
    };

}

Besides separation of concerns, is there any reason (performance wise) that this would be avoided?

You can use a controller function to filter.

Note