How to use parameters within the filter in AngularJS?

JavascriptAngularjs

Javascript Problem Overview


I want to use parameter in filter, when I iterate some arrays with 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 be able to use filter like

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

But its not working. How can I do something like that?

Javascript Solutions


Solution 1 - Javascript

UPDATE: I guess I didn't really look at the documentation well enough but you can definitely use the filter filter with this syntax (see this fiddle) to filter by a property on the objects:

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

Here's my original answer in case it helps someone:

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.

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 in a parameter like this fiddle.

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 this filter assumes there is a status property in the objects in the array which might make it less reusable but this is just an example. You can read this for more info on creating filters.

Solution 2 - Javascript

This question is almost identical to https://stackoverflow.com/questions/11753321/passing-arguments-to-angularjs-filters/, to which I already gave an answer. But I'm gonna post one more answer here just so that people see it.

Actually there is another (maybe better solution) where you can use the angular's native 'filter' 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 make this work you just define your filter as the following:

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

This approach is more versatile because you can do comparisons on values that are nested deep inside the object.

Checkout https://stackoverflow.com/questions/13464809/reverse-polarity-of-an-angular-js-filter/17811582#17811582 to see how you can use this for other useful operations with filter.

Solution 3 - Javascript

If you have created an AngularJs custom filter, you can send multiple params to your filter.Here is usage in template

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

and if you use filter inside your controller here is how you can do that

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 demo

Solution 4 - Javascript

This may be slightly irrelevant, but if you're trying to apply multiple filters with custom functions, you should look into: https://github.com/tak215/angular-filter-manager

Solution 5 - Javascript

Example I have a students list as 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 via gender to be boy and filter by name of them.

The first I create a function named "filterbyboy" as following:

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

Explaination: if not filter name then display all students else filter by input name and gender as 'boy'

Here is full HTMLcode and demo How to use and operator in AngularJs example

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionVuralView Question on Stackoverflow
Solution 1 - JavascriptGloopyView Answer on Stackoverflow
Solution 2 - JavascriptDenis PshenovView Answer on Stackoverflow
Solution 3 - JavascriptHazarapet TunanyanView Answer on Stackoverflow
Solution 4 - JavascriptTakuView Answer on Stackoverflow
Solution 5 - JavascriptLewis HaiView Answer on Stackoverflow