複数の引数を使用してAngular.jsフィルターを呼び出すにはどうすればよいですか?


297

ドキュメントから、次のような日付などのフィルターを呼び出すことができます:

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

ここで、日付は1つの引数を取るフィルターです。

テンプレートとJavaScriptコードの両方から、より多くのパラメーターを持つフィルターを呼び出す構文は何ですか?

回答:


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、expression、コンパレータ)
Roman Sklyarov

@pulkitsinghalどういう意味ですか?問題のあるコードをJSFiddleまたはPlunkerで表示します。
Roman Sklyarov 2014年

フィルターをJavascriptで投稿したとしたら、良かったと思います
Obi

1
@ObiOnuorah OK、CoffeescriptをJavascriptに翻訳しました。
nh2

1
いい物。なぜこの回答がリストの一番上にないのですか?
テタクリ2016年

11

私はカスタムフィルターについても言及している以下で言及しました、2つのパラメーターを持つこれらのフィルターを呼び出す方法

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で、2番目のパラメーターはtrueであり、:記号を使用して「reverse」と組み合わせられます。


4

ng-options内でフィルターを呼び出す場合、コードは次のようになります。

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

フィルターはsizeWithPriceFilterであり、2つのパラメーターproductおよびproductSizeがあります。



0

フィルターとの取引が2つ以上必要な場合は、それらをチェーンすることができます。

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


1
「複数の引数を使用してAngular.jsフィルターを呼び出すにはどうすればよいですか?」という質問に対処しませんか?(「複数のフィルターを呼び出すにはどうすればよいですか?」ではなく)
rom99

-1

このコードでは、jsondataが配列であり、関数returnで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]); 
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.