如何使用多个参数调用Angular.js过滤器?


297

文档开始,我们可以像这样调用过滤器,例如date

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

date是一个带一个参数的过滤器。

从模板和JavaScript代码中调用带有更多参数的过滤器的语法是什么?

Answers:


621

在模板中,可以用冒号分隔过滤器参数。

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

在Javascript中,您将其称为

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

实际上,orderBy筛选器文档中隐藏了一个示例。


例:

假设您制作了一个可以用正则表达式替换内容的过滤器:

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

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

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

  };
});

调用模板以检查所有数字:

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

4
在HTML模板绑定中{{filter_expression | filter:expression:comparator}},在JavaScript中$ filter('filter')(filter_expression,表达式,比较器)
Roman Sklyarov 2013年

@pulkitsinghal是什么意思?在JSFiddle或Plunker中显示有问题的代码。
Roman Sklyarov 2014年

如果您刚刚在Javascript中发布过滤器,那就太好了
Obi 2014年

1
@ObiOnuorah好,只需将Coffeescript转换为Javascript。
nh2 2014年

1
好东西。为什么这个答案不在列表顶部?
thethakuri

11

我在以下提到的地方也提到了自定义过滤器,如何调用这些具有两个参数的过滤器

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

并使用模板从HTML中调用该过滤器,如下所示

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

如果看到的话,第一个参数是inputString,第二个参数是true,它使用:符号与“ reverse”组合


4

如果要在ng-options中调用过滤器,则代码如下:

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

过滤器为sizeWithPriceFilter,并且具有两个参数product和productSize




-1

在这段代码中,jsondata是我们的数组,在函数返回中,我们正在检查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]); 
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.