Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS filter with multiple parameters

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

like image 500
Ben Avatar asked Sep 15 '14 15:09

Ben


People also ask

What is the correct way to apply multiple filter in AngularJS?

Using filters in view templates Filters can be applied to the result of another filter. This is called "chaining" and uses the following syntax: {{ expression | filter1 | filter2 | ... }} E.g. the markup {{ 1234 | number:2 }} formats the number 1234 with 2 decimal points using the number filter.

How do you indicate a parameter to a filter?

Using the filter filter you won't be able to pass in a parameter but there are at least two things you can do. 1) Set the data you want to filter by in a scope variable and reference that in your filter function like this fiddle. 2) Create a new filter that takes in a parameter like this fiddle.

What is custom filter in AngularJS?

Introduction to AngularJS Custom Filter. In AngularJS filters are used to modify or update the data before rendering the data on view or UI. Filters are clubbed in expression or directives using pipe (|) symbol.

How do I filter with Ng options?

In AngularJS when you are using ng-options, you can filter out the options by calling a custom function you have in the controller. Let's say you have following set of employees and when you display all these employees inside HTML select using ng-options, you can see all the employees in a dropdown.


1 Answers

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>
like image 66
Jared Reeves Avatar answered Nov 15 '22 09:11

Jared Reeves