angular filter with dynamic list of attributes to search

Question

my goal it to create a search box that will filter a collection either by searching all the fields, or by a specific attribute. this will be determined by a select.

so, here's what i got

it is able to search by specific attribute, as expected, using this custom filter: my html-

<tr ng-repeat="smartphone in smartphones | filter: search ">

JS-

$scope.search = function (item){
  if (item[$scope.selectedSearchBy].indexOf($scope.query)!=-1) {
    return true;
  }
  return false;
};

note that in order to search on all of the fields, i can change my ng-repeat to be filtered as following:

<tr ng-repeat="smartphone in smartphones | filter:query ">

and it will work.

However, both will not work together.

my question is:

how can i create a truly generic binded dropdown and search box. that will receive the searchable attributes and take care of the filtering appropriatly? (preferably without using ng-show or making DOM manipulations).

would love to supply more details if needed.

make the you filters argument to be an object there you can specify what ever you want w/o affecting your filter signature — Dayan Moreno Leon
– Dayan Moreno Leon, Commented May 30, 2014 at 12:07

Community · Accepted Answer · 2017-05-23 11:47:07Z

2

How about this?

The filter filter supports the object syntax as an argument where the key is the search field and the value is the search query. For example, in your template:

<tr ng-repeat="smartphone in smartphones | filter:{brand: query}">

would filter the list by brand according to the query, and

<tr ng-repeat="smartphone in smartphones | filter:{'$': query}">

would search all the fields. So if only there's a way to do this

<tr ng-repeat="smartphone in smartphones | filter:{selectedSearchBy: query}">

where the key of the object is set to the value of the variable selectedSearchBy, but this isn't possible in javascript, so I wrote a helper function to do it:

<tr ng-repeat="smartphone in smartphones | filter:filterParam(selectedSearchBy, query)">

edited May 23, 2017 at 11:47

CommunityBot

11 silver badge

answered May 30, 2014 at 12:16

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

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

Collectives™ on Stack Overflow

angular filter with dynamic list of attributes to search

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related