Angularjs_AngularJS でのフィルターの使用の詳細な説明
May 16, 2016 pm 03:11 PMフィルターの機能は、入力を受け取り、特定のルールに従って処理し、処理された結果をユーザーに返すことです。フィルターはテンプレート、コントローラー、またはサービスで使用でき、フィルターのカスタマイズも簡単です。
テンプレートでフィルターを使用する
フィルターは、次の構文式を使用してビュー テンプレートで使用できます:
{{ 式 | フィルタ }}
例: {{ 12 | 通貨 }} という形式は、通貨フィルターを使用して数値 12 を通貨形式にフィルターし、結果は $12.00 になります。
フィルターは、別のフィルターの結果に適用できます。これは「チェーン」と呼ばれ、次の構文で使用されます:
{{ 式 | フィルター 2 ... }}
フィルタではパラメータが必要な場合があります。構文は次のとおりです:
{{ 式 | フィルター:引数 1:引数 2:... }}
例: {{ 1234 |number:2 }} の形式は、number のフィルターを使用して、数値 1234 を小数点 2 桁の数値にフィルターします。結果は 1,234.00 です。
コントローラー、サービス、ディレクティブでフィルター
を使用する
コントローラー、サービス、ディレクティブでフィルターを使用できます。
これを行うには、依存関係名をコントローラー/サービス/ディレクティブ: フィルターに挿入する必要があります。たとえば、フィルターが数値の場合、依存関係を使用してnumberFilter を挿入する必要があります。挿入されたパラメーターは、最初のパラメーターとして値を受け取り、2 番目のパラメーターを使用してパラメーターをフィルター処理する関数です。
次の例では、filter というフィルターを使用します。このフィルターは、サブ配列に基づいて配列を削減できます。 {{ctrl.array|filter:'a'}} のようなマークアップをビュー テンプレートに適用することもできます。これにより、'a' の全文検索が行われます。ただし、ビュー テンプレートでフィルターを使用すると、各フィルターが再度フィルター処理され、配列が比較的大きい場合は複数回読み込まれることになります。
したがって、次の例ではコントローラー内のフィルターを直接呼び出します。これにより、コントローラーは必要に応じてフィルターを呼び出すことができます (例: バックエンド データがロードされたとき、またはフィルター式が変更されたとき)。
index.html:
1 2 3 4 5 6 7 8 9 10 11 |
|
script.js:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
結果は次のとおりです:
1 2 |
|
カスタムフィルターの作成:
独自のフィルターの作成は非常に簡単です。モジュールに新しいフィルター ファクトリ関数を登録するだけです。内部的には、filterProvider がここで使用されます。このファクトリー関数は、最初の引数として入力値を持つ新しいフィルター関数を返す必要があります。フィルター パラメーターはすべて、追加パラメーターとしてフィルター関数に渡されます。
このフィルター関数は単純な関数である必要があります。これは、ステートレスかつ冪等である必要があることを意味します。入力関数が変更されると、Angular はこれらのプロパティに依存してフィルターを実行します。
注: フィルターの名前は、有効な角度式識別子である必要があります。たとえば、大文字や orderBy などです。名前にはハイフンやピリオドなどの特殊文字は使用できません。フィルターに名前空間を付ける場合は、大文字 (myappSubsectionFilterx) またはアンダースコア (myapp_subsection_filterx) を使用できます。
次のフィルター例は文字列を反転します。さらに、文字列を大文字にする条件を追加できます。
index.html
1 2 3 4 5 6 7 8 |
|
script.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
結果は次のとおりです:
1 2 3 4 |
|
ステートフルフィルター
ステートフル フィルターは Angular では最適化できず、パフォーマンスの問題が発生することが多いため、ステートフル フィルターを作成することを強くお勧めします。多くのステートフル フィルターは、非表示の状態をモデルとして公開し、それをフィルター パラメーターに変換するだけで、ステートレス フィルターに変換されます。
ただし、ステートフル フィルターを作成する必要がある場合は、フィルターを $stateful としてマークする必要があります。これは、フィルターが各 $digest サイクル中に 1 回以上実行されることを意味します。
インデックス、html
1 2 3 4 5 6 7 |
|
script.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
結果は次のとおりです:
1 2 |
|
次回はangularjsにおけるfilterの一般的な使い方について記事を書きたいと思います。

人気の記事

人気の記事

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











VUE3 基本チュートリアル: データ フィルタリングのためのフィルタの使用

フィルターを使用して Vue でデータの書式設定とデータ フィルターを実装するためのヒント

入門から習得まで、2022 年の最新 5 つの angularjs チュートリアル

PHP と AngularJS を使用して応答性の高い Web サイトを構築し、高品質のユーザー エクスペリエンスを提供します

PHP と AngularJS を使用して Web アプリケーションを構築する

PHP と AngularJS を使用してオンライン ファイル管理プラットフォームを開発し、ファイル管理を容易にする

PHP プログラミングで AngularJS を使用するにはどうすればよいですか?
