AngularJSフィルターの使い方の詳しい説明_AngularJS

AngularJS のフィルター、中国語名の「フィルター」は、変数の値をフィルターしたり、出力をフォーマットして目的の結果や形式を取得したりするために使用されます。

フィルターの紹介

フィルターはデータのフォーマットに使用されます。

フィルターの基本プロトタイプ ('|' は Linux のパイプ モードに似ています):

{{ expression | filter }}

フィルターはチェーンで使用できます (つまり、複数のフィルターが連続して使用されます):

{{ expression | filter1 | filter2 | ... }}

フィルターでは複数のパラメーターを指定することもできます:

{{ expression | filter:argument1:argument2:... }}

1. ビュー テンプレートで
を使用します。

式にフィルタを適用する

形式は次のようにする必要があります:

{{ 式フィルター }} つまり、{{ 式フィルター }}

例: {{ 12 | 通貨 }} 出力は $12.00

出力結果にフィルターを適用します

簡単に言うと、フィルターの重ね合わせです。前のフィルターの出力結果が次のフィルターの入力データ ソースとして使用されます。

形式は次のようにする必要があります:

{{ 式 | フィルター 2 | ... }} つまり、式 (式) はフィルター 1 によってフィルターされ、次にフィルター 2 によってフィルターされます。

パラメータによるフィルター

フィルターの後に 1 つ以上のパラメーターを続けると、特別な要件と必要なフィルターの実装に役立ちます。

形式は次のようにする必要があります:

{{ 式 | 引数 1: 引数 2:... }}

例: {{ 1234 | 数値:2 }} = 1,234.00

2. AngluarJS 組み込みフィルターを使用します

AngularJS は 9 つの組み込みフィルターを提供します

それらは、通貨、日付、フィルター、JSON、limitTo、大文字、小文字、数値、orderBy です。

具体的な使用法については、AngularJS ドキュメントで詳しく説明されています。ここでは、一般的に使用されるもののほんの一部を紹介します。

通貨フィルター

通貨 – 変数を通貨表現に変換するために使用されます

例: {{ 金額 | 通貨}}

大文字/小文字フィルター (大文字フィルター)

例:

{{ "小文字の大文字の文字列" }}

<input ng-model="userInput"> 大文字: {{ userInput }}

日付フィルター (日付フィルター)

例:

{{ 1304375948024 | 日付 }}

{{ 1304375948024 | 日付:"MM/dd/yyyy @ h:mma" }}

json フィルター

例:

{{ {foo: "bar"、baz: 23}}

コントローラー、サービス、クリティカルでフィルターを使用する

AngularJS コントローラー、サービス、またはディレクティブでフィルターを使用できます。このとき、コントローラー、サービス、またはディレクティブの依存関係に依存フィルター名を追加する必要があります。

コントローラーでフィルターを直接使用すると、コントローラーは独自のニーズに応じてフィルターを呼び出すことができます

3. カスタムフィルター (フィルター)

AngularJS でカスタム フィルターを記述する形式は、AngularJS のファクトリー サービスと非常によく似ています。記述する際には、複数のパラメーターを持つ関数のみが必要であることを覚えておいてください。

形式はおおよそ次のとおりです:

app.filter('filter(过滤器)名称',function(){ 
return function(需要过滤的对象,过滤器参数1,过滤器参数2,...){ 
//...执行业务逻辑代码 
return 处理后的对象; 
}
});