How to filter multiple values OR operation in angularJS

Question

I want to use the filter in angular and want to filter for multiple values  if it has either one of the values then it should be displayed   I have  for example this structure    An object movie which has the property genres and I want to filter for Action and Comedy   I know I can do filter   genres   Action       genres   Comedy     but what to do if I want to filter it dynamically  E g  filter  variableX  How do I set variableX in the  scope  when I have an array of the genres I have to filter   I could construct it as a string and then do an eval   but I don t want to use eval

User · Answer

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,

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

Usage:

arrayOfObjectswithKeys | filterMultiple:{key1:['value1','value2','value3',...etc],key2:'value4',key3:[value5,value6,...etc]}

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

User · Answer

I would just create a custom filter   They are not that hard   angular module  myFilters          filter  bygenre   function         return function movies genres          var out                Filter logic here  adding matches to the out var        return out                template    lt h1 gt Movies lt  h1 gt    lt div ng-init  movies                title  Man on the Moon   genre  action               title  Meet the Robinsons   genre  family               title  Sphere   genre  action                gt   lt input type  checkbox  ng-model  genrefilters action    gt Action  lt br   gt   lt input type  checkbox  ng-model  genrefilters family    gt Family  lt br   gt   genrefilters action      genrefilters family    lt ul gt       lt li ng-repeat  movie in movies   bygenre genrefilters  gt   movie title      movie genre   lt  li gt   lt  ul gt    Edit here is the link  Creating Angular Filters  UPDATE   Here is a fiddle that has an exact demo of my suggestion

User · Answer

I had similar situation  Writing custom filter worked for me  Hope this helps   JS   App filter  searchMovies   function         return function  items  letter            var resulsts               var itemMatch   new RegExp letter   i            for  var i   0  i  lt  items length  i                  var item   items i               if   itemMatch test item name     itemMatch test item genre                     results push item                                   return results               HTML     lt div ng-controller  MoviesCtrl  gt       lt ul gt           lt li ng-repeat  movie in movies   searchMovies filterByGenres  gt                 movie name       movie genre             lt  li gt       lt  ul gt   lt  div gt

User · Answer

You can use a controller function to filter   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               HTML    lt div ng-controller  MoviesCtrl  gt       lt ul gt           lt li ng-repeat  movie in movies   filter filterByGenres  gt                 movie name       movie genre             lt  li gt       lt  ul gt   lt  div gt

User · Answer

You can also use ngIf if the situation permits    lt div ng-repeat  p in      name   Justin         name   Jimi         name   Bob        ng-if    Jimi    Bob   indexOf e name   gt  -1  gt      p name    is cool  lt  div gt

User · Answer

I believe this is what you re looking for    lt div gt     collection   fitler1 args     collection   filter2 args     lt  div gt

User · Answer

Here is my example how create filter and directive for table jsfiddle  directive get list  datas  and create table with filters   lt div ng-app  autoDrops  ng-controller  HomeController  gt   lt div class  row  gt       lt div class  col-md-12  gt           lt h1 gt   title   lt  h1 gt           lt ng-Multiselect array-List  datas  gt  lt  ng-Multiselect gt       lt  div gt   lt  div gt   lt  div gt    my pleasure if i help you

User · Answer

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   String prototype contains   function str      return this indexOf str     -1      String prototype containsAll   function strArray      for  var i   0  i  lt  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                       Usage    lt li ng-repeat  x in array   filterMultiple  key1  value1  key2  value21  value22    gt   x name   lt  li gt

User · Answer

Creating a custom filter might be overkill here  you can just pass in a custom comparator  if you have the multiples values like    scope selectedGenres    Action  Drama      scope containsComparator   function expected  actual       return actual indexOf expected   gt  -1       then in the filter   filter  name selectedGenres  containsComparator

User · Answer

OPTION 1  Using Angular providered filter comparator parameter     declaring a comparator method  scope filterBy   function actual  expected        return   contains expected  actual      uses underscore library contains method     var employees     name   a     name   b     name   c     name   d         filter employees with name matching with either  a  or  c  var filteredEmployees    filter  filter   employees   name    a   c      scope filterBy     OPTION 2  Using Angular providered filter negation  var employees     name   a     name   b     name   c     name   d         filter employees with name matching with either  a  or  c  var filteredEmployees    filter  filter    filter  filter   employees   name    d      name    b

User · Answer

you can use searchField filter of angular filter  JS    scope users        first name   Sharon   last name   Melendez        first name   Edmundo   last name   Hepler        first name   Marsha   last name   Letourneau         HTML    lt input ng-model  search  placeholder  search by full name   gt    lt th ng-repeat  user in users   searchField   first name    last name    filter  search  gt       user first name       user last name     lt  th gt   lt  -- so now you can search by full name -- gt

User · Answer

I ve spent some time on it and thanks to  chrismarx  I saw that angular s default filterFilter allows you to pass your own comparator  Here s the edited comparator for multiple values     function hasCustomToString obj            return angular isFunction obj toString   amp  amp  obj toString     Object prototype toString        var comparator   function  actual  expected        if  angular isUndefined actual              No substring matching against  undefined        return false            if   actual     null      expected     null              No substring matching against  null   only match against  null        return actual     expected               I edited this to check if not array     if   angular isObject expected   amp  amp   angular isArray expected       angular isObject actual   amp  amp   hasCustomToString actual               Should not compare primitives against objects  unless they have custom  toString  method       return false               This is where magic happens     actual   angular lowercase      actual       if  angular isArray expected           var match   false        expected forEach function  e            e   angular lowercase      e           if  actual indexOf e      -1              match   true                            return match        else         expected   angular lowercase      expected         return actual indexOf expected      -1               And if we want to make a custom filter for DRY   angular module  myApp        filter  filterWithOr   function   filter          var comparator   function  actual  expected            if  angular isUndefined actual                  No substring matching against  undefined            return false                    if   actual     null      expected     null                  No substring matching against  null   only match against  null            return actual     expected                    if   angular isObject expected   amp  amp   angular isArray expected       angular isObject actual   amp  amp   hasCustomToString actual                   Should not compare primitives against objects  unless they have custom  toString  method           return false                    console log  ACTUAL EXPECTED           console log actual          console log expected           actual   angular lowercase      actual           if  angular isArray expected               var match   false            expected forEach function  e                console log  forEach               console log e              e   angular lowercase      e               if  actual indexOf e      -1                  match   true                                        return match            else             expected   angular lowercase      expected             return actual indexOf expected      -1                           return function  array  expression            return  filter  filter   array  expression  comparator                      And then we can use it anywhere we want    scope list      name  Jack Bauer       name  Chuck Norris       name  Superman       name  Batman       name  Spiderman       name  Hulk         lt ul gt     lt li ng-repeat  item in list   filterWithOr  name   Jack   Chuck     gt        item name      lt  li gt   lt  ul gt    Finally here s a plunkr   Note  Expected array should only contain simple objects like String  Number etc

User · Answer

If you want to filter on Array of Objects then you can give  filter   genres   Action   key  value     Individual property will be filtered by particular filter given for that property   But if you wanted to something like filter by individual Property and filter globally for all properties then you can do something like this  x000D   x000D   lt tr ng-repeat  supp in  data   filter   filterObject    filter   search  gt  x000D   x000D   x000D  Where  filterObject  is an object for searching an individual property and  Search  will search in every property globally    Atul

User · Answer

Lets assume you have two array  one for movie and one for genre  Just use the filter as  filter  genres  genres type    Here genres being the array and type has value for genre

User · Answer

The quickest solution that I ve found is to use the filterBy filter from angular-filter  for example    lt input type  text  placeholder  Search by name or genre  ng-model  ctrl search   gt      lt ul gt     lt li ng-repeat  movie in ctrl movies   filterBy    name    genre    ctrl search  gt        movie name      movie genre    -   movie rating      lt  li gt   lt  ul gt    The upside is that angular-filter is a fairly popular library   2 6k stars on GitHub  which is still actively developed and maintained  so it should be fine to add it to your project as a dependency

User · Answer

the best answer is    filter   genres   Action   genres   Comedy

User · Answer

Please try this  var m   angular module  yourModuleName    m filter  advancefilter      filter   function  filter       return function data  text           var textArr   text split               angular forEach textArr  function test               if test                     data    filter  filter   data  test                                     return data

User · Answer

Angular Or Filter Module   filter  orFilter                      arg1  arg2        false   here is the link  https   github com webyonet angular-or-filter

User · Answer

Too late to join the party but may be it can help someone   We can do it in two step  first filter by first property and then concatenate by second filter    scope filterd    filter  filter    scope empList    dept   account       scope filterd    scope filterd concat  filter  filter    scope empList    dept   sales           See the working fiddle with multiple property filter

User · Answer

My solution  ng-repeat  movie in movies   filter    Action     filter    Comedy

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

Examples related to javascript

Examples related to angularjs

Examples related to angularjs-ng-repeat