CODEWITHSUNDEEP
javascriptangularjsfilter
Lio
Lio

Reputation: 1503

AngularJS filter in certain fields with "OR" condition

I have an issue with AngularJS filters.

I wan't to "filter" with one input search box, but to make list filtered with multiple fields with "OR" condition.

Here, is a demo.

http://jsbin.com/wodewexetu/2/edit

I wan't to filter the list with only name and description fields.

If I type: "hello", "world", or "angular" it should not return any result.

If I type: "example", it should return only 1st and 3rd rows.

If I type: "description" it should return only 1st and 2nd rows. and etc.

So in general, I want to filter with one name, multiple, but certain fields in list with "OR" condition.

I was able to make the "AND" condition, but it's not what I need.

I also searched a lot about this topic, but unfortunately, non of those codes and examples worked for me.

Please, help and thanks in advance.

Upvotes: 2

Views: 910

Answers (2)

Yaron Schwimmer
Yaron Schwimmer

Reputation: 5357

You can create your own custom filter, and apply whatever functionality you want.

In your case, something like:

app.filter('customFilter', function() {
  return function(items, search) {
    if (!search) {
      return items;
    }
    var searchItems = new RegExp(search.split(' ').join("|"), "i");
    return items.filter(function(item) {
      return searchItems.test(item.name) || searchItems.test(item.description);
    });
  };  
});

See it working here.

Upvotes: 2

Michael
Michael

Reputation: 3104

I think OR filters are not supported yet. I solved it by creating a meta propery called $searchable.

 angular.forEach($scope.items, function (item){
     Item.$searchable = [item.name, item.description].join (' ');
}

In the html:

<input type="text" ng-model="search.$searchable">

Upvotes: 2

Related Questions