312

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?

F.D.Castel
  • 2,284
  • 1
  • 16
  • 15
nh2
  • 24,526
  • 11
  • 79
  • 128

6 Answers6

640

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>
nh2
  • 24,526
  • 11
  • 79
  • 128
  • 4
    In HTML Template Binding {{ filter_expression | filter:expression:comparator }}, In JavaScript $filter('filter')(filter_expression, expression, comparator) – Roman Sklyarov Dec 19 '13 at 16:36
  • @pulkitsinghal what do you mean? Show your problematic code in JSFiddle or Plunker. – Roman Sklyarov Mar 24 '14 at 10:05
  • Would have been nice if you just posted the filter in Javascript – Obi May 25 '14 at 04:57
  • 1
    @ObiOnuorah OK, just translated the Coffeescript to Javascript. – nh2 May 25 '14 at 12:59
  • 1
    Good stuff. Why isn't this answer in the top of the list ? – thethakuri Jun 23 '16 at 15:12
  • @nh2 Would you be able to update your answer with the suggestion from srox00? The javascript should be `$filter('yourFilter')(yourExpression, arg1, arg2, ...)` – Dylanthepiguy Jul 06 '16 at 22:17
  • @Dylanthepiguy OK, fixed! – nh2 Jul 07 '16 at 10:48
  • 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) – Vivian River Jan 25 '19 at 20:27
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

Anik Islam Abhi
  • 25,137
  • 8
  • 58
  • 80
Bravo
  • 8,589
  • 14
  • 48
  • 85
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

shacharsol
  • 2,326
  • 20
  • 14
1

like this:

var items = $filter('filter')(array, {Column1:false,Column2:'Pending'});
Amay Kulkarni
  • 828
  • 13
  • 16
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
Nathaniel Ford
  • 20,545
  • 20
  • 91
  • 102
  • possible duplicate: http://stackoverflow.com/questions/16227325/how-do-i-call-an-angular-js-filter-with-multiple-arguments – sjokkogutten Jan 18 '16 at 19:24
  • 1
    Doesn't address the question "How do I call an Angular.js filter with multiple arguments?" (rather than "How do I call multiple filters?") – rom99 Apr 15 '16 at 07:41
-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]); 
Gajender Singh
  • 1,285
  • 14
  • 13