Passing arguments to angularjs filters

Question

Is it possible to pass an argument to the filter function so you can filter by any name   Something like    scope weDontLike   function item  name        console log arguments       return item name    name

User · Answer

You can pass multiple arguments to angular filter !

Defining my angular app and and an app level variable -

var app = angular.module('filterApp',[]);
app.value('test_obj', {'TEST' : 'test be check se'});

Your Filter will be like :-

app.filter('testFilter', [ 'test_obj', function(test_obj) {
    function test_filter_function(key, dynamic_data) {
      if(dynamic_data){
        var temp = test_obj[key]; 
        for(var property in dynamic_data){
            temp = temp.replace(property, dynamic_data[property]);
        }
        return temp;
      }
      else{
        return test_obj[key] || key;
      }

    }
    test_filter_function.$stateful = true;
    return test_filter_function;
  }]);

And from HTML you will send data like :-

<span ng-bind="'TEST' | testFilter: { 'be': val, 'se': value2 }"></span>

Here I am sending a JSON object to the filter. You can also send any kind of data like string or number.

also you can pass dynamic number of arguments to filter , in that case you have to use arguments to get those arguments.

For a working demo go here - passing multiple arguments to angular filter

User · Answer

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    lt div ng-repeat  group in groups  gt       lt li ng-repeat  friend in friends   filter weDontLike group enemy name   gt           lt span gt   friend name   lt  span gt       lt li gt   lt  div gt    To make this work you just define your filter as the following    scope weDontLike   function name        return function friend            return friend name    name            As you can see here  weDontLike actually returns another function which has your parameter in its scope as well as the original item coming from the filter   It took me 2 days to realise you can do this  haven t seen this solution anywhere yet   Checkout Reverse polarity of an angular js filter to see how you can use this for other useful operations with filter

User · Answer

Extending on pkozlowski opensource s answer and using javascript array s builtin filter method a prettified solution could be this    filter  weDontLike   function        return function items  name           return items filter function item                return item name    name                           Here s the jsfiddle link   More on Array filter here

User · Answer

Actually you can pass a parameter   http   docs angularjs org api ng filter filter   and don t need a custom function just for this  If you rewrite your HTML as below it ll work    lt div ng app gt    lt div ng-controller  HelloCntl  gt    lt ul gt       lt li ng-repeat  friend in friends   filter  name   Adam    gt           lt span gt   friend name   lt  span gt           lt span gt   friend phone   lt  span gt       lt  li gt    lt  ul gt    lt  div gt   lt  div gt    http   jsfiddle net ZfGx4 59

User · Answer

From what I understand you can t pass an arguments to a filter function  when using the  filter  filter   What you would have to do is to write a custom filter  sth like this    filter  weDontLike   function     return function items  name        var arrayToReturn                   for  var i 0  i lt items length  i             if  items i  name    name                arrayToReturn push items i                         return arrayToReturn       Here is the working jsFiddle  http   jsfiddle net pkozlowski opensource myr4a 1   The other simple alternative  without writing custom filters is to store a name to filter out in a scope and then write    scope weDontLike   function item      return item name     scope name

User · Answer

You can simply do like this  In Template   lt span ng-cloak gt   amount  firstFiler  firstArgument   secondArgument     lt  span gt    In filter  angular module  app    filter  firstFiler  function         console log  filter loads        return function items  firstArgument secondArgument           console log  item is   items      it is value upon which you have to filter         console log  firstArgument is   firstArgument           console log  secondArgument   secondArgument            return  hello

User · Answer

You can simply use    filter yourFunction arg  lt div ng-repeat  quot group in groups   filter weDontLike group quot  gt     lt  div gt   And in js  scope weDontLike   function group      here your condition criteria return   group

[javascript] Passing arguments to angularjs filters

Examples related to javascript

Examples related to angularjs

Examples related to angular-filters