315

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?

6 Answers 6

646

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>
Sign up to request clarification or add additional context in comments.

8 Comments

In HTML Template Binding {{ filter_expression | filter:expression:comparator }}, In JavaScript $filter('filter')(filter_expression, expression, comparator)
@pulkitsinghal what do you mean? Show your problematic code in JSFiddle or Plunker.
Would have been nice if you just posted the filter in Javascript
@ObiOnuorah OK, just translated the Coffeescript to Javascript.
Good stuff. Why isn't this answer in the top of the list ?
|
11

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

Comments

4

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

Comments

1

like this:

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

Comments

0

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

2 Comments

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

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]); 

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.