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

Angularjs

Angularjs Problem Overview


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?

Angularjs Solutions


Solution 1 - Angularjs

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>

Solution 2 - Angularjs

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

Solution 3 - Angularjs

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

Solution 4 - Angularjs

like this:

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

Solution 5 - Angularjs

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

Solution 6 - Angularjs

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

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
Questionnh2View Question on Stackoverflow
Solution 1 - Angularjsnh2View Answer on Stackoverflow
Solution 2 - AngularjsBravoView Answer on Stackoverflow
Solution 3 - AngularjsshacharsolView Answer on Stackoverflow
Solution 4 - AngularjsAmay KulkarniView Answer on Stackoverflow
Solution 5 - AngularjsJonatas MarinhoView Answer on Stackoverflow
Solution 6 - AngularjsGajender SinghView Answer on Stackoverflow