AngularJS: search multiple values on ng-model

Question

I've been searching for a solution but I couldn't find an exact scenario. I wonder anyone could help. I have ng-repeat filter list like this:

<ul>   
  <li ng-repeat="f in filterOptions">
  <p>{{f.group}}</p>   
    <ul>
      <li ng-repeat="o in f.options">
        <input id="{{$parent.f.filtername}}{{$index}}" type="checkbox" ng-model="Filter.category[o.title]" ng-true-value="{{o.title}}" ng-false-value=""  />
      </li>
    </ul>
  </li>
</ul>

My JSON:

[
  {
    "group": "Product Categories",
    "filtername" : "category",
    "options": [
        {
            "title": "Category A",
            "alt_titles": ["Category B, Category C"]
        },
        {
            "title": "Category 1",
            "alt_titles": ["Category 2, Category 3"]
        }
    ]
  }
]

With this, I could successfully search for items that belongs to o.titles. Now, I wonder what should I do so I could search for items that also belongs to alt_titles.

Ex: If I click on Category A, it will also loop items for Category B and Category C. Same with Category 1, it should show items on Category 2 and 3.

I hope I was clear. Please help. Thanks!

Working sample FIDDLE

Probable duplicate of http://stackoverflow.com/questions/13216115/filtering-by-multiple-specific-model-properties-in-angularjs-in-or-relationship and similar questions. — orbitbot, Mar 30 '15 at 23:22

score 1 · Answer 1 · answered Mar 30 '15 at 23:52

1

In this case, you would need a custom filter. Documentation here: https://docs.angularjs.org/tutorial/step_09 My Example here: http://plnkr.co/edit/lzyo5cTMd6FUzYw9JSq8

app.filter('MultiValueFilter',function(){
return function(list, queries){
  var result = [];
  var queries_regex = [];
  angular.forEach(queries, function(query){
    queries_regex.push(new RegExp('^' + escapeRegExp(query),'i'));
  });

  angular.forEach(list, function(item){
    for(var i = 0; i < queries_regex.length; ++i){
      if(queries_regex[i].test(item)){
        result.push(item);
        break;
      }
    }
  });
  return result;
  };
});

Basically, this function loop through each item in the list, test it against a list of regexp, if it matches one of the regexp, push it into the result.

answered Mar 30 '15 at 23:52

rabbit.aaron

2,369
16
25

I already have a custom filter that takes a single value from the json (o.title) but I need to be able to take values from o.alt_titles if they are available. – Jon Mar 31 '15 at 13:25
Did you see the example in plunker? It IS taking multiple values as filter. – rabbit.aaron Mar 31 '15 at 23:02
Yes, but I don't know exactly how to integrate your example into my current custom filter. – Jon Apr 01 '15 at 01:30

AngularJS: search multiple values on ng-model

1 Answers1