How to use parameters in a filter in AngularJS?

Question

I want to use a parameter in a filter when I repeat multiple arrays using ng-repeat

Example:

HTML part:

<tr ng-repeat="user in users | filter:isActive"> 

JavaScript part:

 $scope.isActive = function(user) { return user.active === "1"; }; 

But I want to use a filter like

 <tr ng-repeat="user in users | filter:isStatus('4')"> 

But it does not work. How can I do something like this?

Answer 1

UPDATE: I think that I actually didn’t look at the documentation enough, but you can definitely use filter with this syntax (see this fiddle ) to filter by the property of the objects:

 <tr ng-repeat="user in users | filter:{status:4}"> 

---

Here is my original answer if it helps someone:

Using the filter filter , you cannot pass a parameter, but you can do at least two things.

1) Set the data that you want to filter in a variable scope and specify what is in your filter function, for example, this fiddle .

JavaScript:

 $scope.status = 1; $scope.users = [{name: 'first user', status: 1}, {name: 'second user', status: 2}, {name: 'third user', status: 3}]; $scope.isStatus = function(user){ return (user.status == $scope.status); }; 

Html:

 <li ng-repeat="user in users | filter:isStatus"> 

OR

2) Create a new filter that takes a parameter to this script .

JavaScript:

 var myApp = angular.module('myApp', []); myApp.filter('isStatus', function() { return function(input, status) { var out = []; for (var i = 0; i < input.length; i++){ if(input[i].status == status) out.push(input[i]); } return out; }; }); 

Html:

 <li ng-repeat="user in users | isStatus:3"> 

Note that this filter assumes that there is a status property in array objects that can make it less reusable, but this is just an example. You can read this for more information on creating filters.

Answer 2

This question is almost identical Passing arguments to angularjs filters , which I already answered. But I'm going to post another answer here so that people can see it.

Actually there is another (maybe better solution) where you can use the filter 'w500> native' filter 'and still pass arguments to your custom filter.

Consider the following code:

  <li ng-repeat="user in users | filter:byStatusId(3)"> <span>{{user.name}}</span> <li> 

To do this, you simply define your filter as follows:

 $scope.byStatusId = function(statusId) { return function(user) { return user.status.id == statusId; } } 

This approach is more universal because you can make comparisons on values ​​nested deep inside the object.

Check out the reverse polarity of the angular.js filter to find out how you can use this for other useful filter operations.

Answer 3

This might be a little inappropriate, but if you are trying to apply multiple filters with custom features, you should study: https://github.com/tak215/angular-filter-manager

Answer 4

Example. I have a list of students as shown below:

 $scope.students = [ { name: 'Hai', age: 25, gender: 'boy' }, { name: 'Hai', age: 30, gender: 'girl' }, { name: 'Ho', age: 25, gender: 'boy' }, { name: 'Hoan', age: 40, gender: 'girl' }, { name: 'Hieu', age: 25, gender: 'boy' } ]; 

I want to filter students by gender to be a boy, and filter them by name.

First, I create a function called "filterbyboy" as follows:

 $scope.filterbyboy = function (genderstr) { if ((typeof $scope.search === 'undefined')||($scope.search === '')) return (genderstr = "") else return (genderstr = "boy"); }; 

Explanation: if not a filter name, then display all students who filter by name and gender as “boy”

Here is the complete HTML code and a demo of How to use and operator in AngularJs example

Answer 5

If you have created a custom AngularJs filter, you can send several parameters to your filter. Here is the use in the template

 {{ variable | myFilter:arg1:arg2... }} 

and if you use a filter inside your controller, here is how you can do it

 angular.module('MyModule').controller('MyCtrl',function($scope, $filter){ $filter('MyFilter')(arg1, arg2, ...); }) 

if you need more with examples and online demo you can use this

AngularJs filters examples and demos