How do I call an Angular.js filter with multiple arguments?

Question

As from the documentation, we can call a filter such as date like this:

{{ myDateInScope | date: 'yyyy-MM-dd' }}

Here date is a filter that takes one argument.

What is the syntax to call filters with more parameters both from templates and from JavaScript code?

Duncan

Answer 1

In templates, you can separate filter arguments by colons.

{{ yourExpression | yourFilter: arg1:arg2:... }}

From Javascript, you call it as

$filter('yourFilter')(yourExpression, arg1, arg2, ...)

There is actually an example hidden in the orderBy filter docs.

---

Example:

Let's say you make a filter that can replace things with regular expressions:

myApp.filter("regexReplace", function() { // register new filter

  return function(input, searchRegex, replaceRegex) { // filter arguments

    return input.replace(RegExp(searchRegex), replaceRegex); // implementation

  };
});

Invocation in a template to censor out all digits:

<p>{{ myText | regexReplace: '[0-9]':'X' }}</p>

Duncan

In HTML Template Binding {{ filter_expression | filter:expression:comparator }}, In JavaScript $filter('filter')(filter_expression, expression, comparator) – Neuberger

@pulkitsinghal what do you mean? Show your problematic code in JSFiddle or Plunker. – Neuberger

Would have been nice if you just posted the filter in Javascript – Prelacy

@ObiOnuorah OK, just translated the Coffeescript to Javascript. – Duncan

Good stuff. Why isn't this answer in the top of the list ? – Dessert

@Duncan Would you be able to update your answer with the suggestion from srox00? The javascript should be $filter('yourFilter')(yourExpression, arg1, arg2, ...) – Distraction

@Distraction OK, fixed! – Duncan

For any beginners here, it would be terrible to use an AngularJS to filter digits like this because the client could easy rig up the Javascript to not apply the filter. (This would apply to any client-side scripting language) – Sava

Answer 2

i mentioned in the below where i have mentioned the custom filter also , how to call these filter which is having two parameters

countryApp.filter('reverse', function() {
    return function(input, uppercase) {
        var out = '';
        for (var i = 0; i < input.length; i++) {
            out = input.charAt(i) + out;
        }
        if (uppercase) {
            out = out.toUpperCase();
        }
        return out;
    }
});

and from the html using the template we can call that filter like below

<h1>{{inputString| reverse:true }}</h1>

here if you see , the first parameter is inputString and second parameter is true which is combined with "reverse' using the : symbol

Phenice

Answer 3

If you want to call your filter inside ng-options the code will be as follows:

ng-options="productSize as ( productSize | sizeWithPrice: product )  for productSize in productSizes track by productSize.id"

where the filter is sizeWithPriceFilter and it has two parameters product and productSize

Pricking

Answer 4

like this:

var items = $filter('filter')(array, {Column1:false,Column2:'Pending'});

Cultus

Answer 5

If you need two or more dealings with the filter, is possible to chain them:

{{ value | decimalRound: 2 | currencySimbol: 'U$' }} 
// 11.1111 becomes U$ 11.11

Pioneer

possible duplicate: #16227825 – Passade

Doesn't address the question "How do I call an Angular.js filter with multiple arguments?" (rather than "How do I call multiple filters?") – Celina

Answer 6

In this code, jsondata is our array and in function return we are checking the 'version' present in the jsondata.

var as = $filter('filter')(jsondata, function (n,jsondata){
   return n.filter.version==='V.0.3'
});

console.log("name is " + as[0].name+as[0]); 

Salvador