AngularJS filter with multiple parameters

Question

I want to be able to filter my table with many parameters passed in as an array. Therefore I can build up an array of filter params and pass them in. I don't want to explicitly state what columns to filter against as there could be many columns (some which will be shown and some not).

The HTML looks something like this;

<tr ng-repeat="item in infoData | filter:['param1','param2']">
    <td>{{item.data1}}</td>
    <td>{{item.data2}}</td>
    <td>{{item.data3}}</td>
    <td>{{item.data4}}</td>
</tr>

Is there away to filter a table against multiple parameters?

Thanks

Jared Reeves · Accepted Answer · 2014-09-16 12:57:52Z

6

This is the quick and dirty way to accomplish what you need.

First create a custom filter in the controller something like this:

$scope.customFilter = function(param1, param2) {
   return function(item) {
      //return custom stuff here
   }
}

then in the html you do this

<tr ng-repeat="item in infoData | filter:customFilter(param1, param2)">
   <td>{{item.data1}}</td>
   <td>{{item.data2}}</td>
   <td>{{item.data3}}</td>
   <td>{{item.data4}}</td>
</tr>

this is an example with a custom filter

app.filter('customFilter', function (param1, param2) {
    return function (item) {
       //return custom stuff here
    };
});

and now in the html you do this:

<tr ng-repeat="item in infoData | customFilter(param1, param2)">
   <td>{{item.data1}}</td>
   <td>{{item.data2}}</td>
   <td>{{item.data3}}</td>
   <td>{{item.data4}}</td>
</tr>

edited Sep 16, 2014 at 12:57

answered Sep 15, 2014 at 15:49

Jared Reeves

1,3902 gold badges15 silver badges29 bronze badges

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

2 Comments

Ben Over a year ago

Shouldn't this be added to a custom filter, instead of the controller?

Jared Reeves Over a year ago

This is the quick and dirty way, but you most certainly could build a custom filter, especially if the filter is complex. I updated the answer.

Collectives™ on Stack Overflow

AngularJS filter with multiple parameters

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related