ホームページ ウェブフロントエンド jsチュートリアル Angularjs_AngularJS でのフィルターの使用の詳細な説明

Angularjs_AngularJS でのフィルターの使用の詳細な説明

May 16, 2016 pm 03:11 PM
angularjs filters

フィルターの機能は、入力を受け取り、特定のルールに従って処理し、処理された結果をユーザーに返すことです。フィルターはテンプレート、コントローラー、またはサービスで使用でき、フィルターのカスタマイズも簡単です。

テンプレートでフィルターを使用する

フィルターは、次の構文式を使用してビュー テンプレートで使用できます:

{{ 式 | フィルタ }}

例: {{ 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

<div ng-controller="FilterController as ctrl">

 <div>

  All entries:

  <span ng-repeat="entry in ctrl.array">{{entry.name}} </span>

 </div>

 <div>

  Entries that contain an "a":

  <span ng-repeat="entry in ctrl.filteredArray">{{entry.name}} </span>

 </div>

</div>

ログイン後にコピー

script.js:

1

2

3

4

5

6

7

8

9

10

11

12

angular.module('FilterInControllerModule', []).

controller('FilterController', ['filterFilter', function(filterFilter) {

 this.array = [

  {name: 'Tobias'},

  {name: 'Jeff'},

  {name: 'Brian'},

  {name: 'Igor'},

  {name: 'James'},

  {name: 'Brad'}

 ];

 this.filteredArray = filterFilter(this.array, 'a');

}]);

ログイン後にコピー

結果は次のとおりです:

1

2

All entries: Tobias Jeff Brian Igor James Brad

Entries that contain an "a": Tobias Brian James Brad

ログイン後にコピー

カスタムフィルターの作成:

独自のフィルターの作成は非常に簡単です。モジュールに新しいフィルター ファクトリ関数を登録するだけです。内部的には、filterProvider がここで使用されます。このファクトリー関数は、最初の引数として入力値を持つ新しいフィルター関数を返す必要があります。フィルター パラメーターはすべて、追加パラメーターとしてフィルター関数に渡されます。

このフィルター関数は単純な関数である必要があります。これは、ステートレスかつ冪等である必要があることを意味します。入力関数が変更されると、Angular はこれらのプロパティに依存してフィルターを実行します。

注: フィルターの名前は、有効な角度式識別子である必要があります。たとえば、大文字や orderBy などです。名前にはハイフンやピリオドなどの特殊文字は使用できません。フィルターに名前空間を付ける場合は、大文字 (myappSubsectionFilterx) またはアンダースコア (myapp_subsection_filterx) を使用できます。

次のフィルター例は文字列を反転します。さらに、文字列を大文字にする条件を追加できます。

index.html

1

2

3

4

5

6

7

8

<div ng-controller="MyController">

 <input ng-model="greeting" type="text"><br>

 No filter: {{greeting}}<br>

 Reverse: {{greeting|reverse}}<br>

 Reverse + uppercase: {{greeting|reverse:true}}<br>

 Reverse, filtered in controller: {{filteredGreeting}}<br>

</div>

ログイン後にコピー

script.js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

angular.module('myReverseFilterApp', [])

.filter('reverse', function() {

 return function(input, uppercase) {

  input = input || '';

  var out = "";

  for (var i = 0; i < input.length; i++) {

   out = input.charAt(i) + out;

  }

  // conditional based on optional argument

  if (uppercase) {

   out = out.toUpperCase();

  }

  return out;

 };

})

.controller('MyController', ['$scope', 'reverseFilter', function($scope, reverseFilter) {

 $scope.greeting = 'hello';

 $scope.filteredGreeting = reverseFilter($scope.greeting);

}]);

ログイン後にコピー

結果は次のとおりです:

1

2

3

4

No filter: hello

Reverse: olleh

Reverse + uppercase: OLLEH

Reverse, filtered in controller: olleh

ログイン後にコピー

ステートフルフィルター

ステートフル フィルターは Angular では最適化できず、パフォーマンスの問題が発生することが多いため、ステートフル フィルターを作成することを強くお勧めします。多くのステートフル フィルターは、非表示の状態をモデルとして公開し、それをフィルター パラメーターに変換するだけで、ステートレス フィルターに変換されます。

ただし、ステートフル フィルターを作成する必要がある場合は、フィルターを $stateful としてマークする必要があります。これは、フィルターが各 $digest サイクル中に 1 回以上実行されることを意味します。

インデックス、html

1

2

3

4

5

6

7

<div ng-controller="MyController">

 Input: <input ng-model="greeting" type="text"><br>

 Decoration: <input ng-model="decoration.symbol" type="text"><br>

 No filter: {{greeting}}<br>

 Decorated: {{greeting | decorate}}<br>

</div>

ログイン後にコピー

script.js:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

angular.module('myStatefulFilterApp', [])

.filter('decorate', ['decoration', function(decoration) {

 

 function decorateFilter(input) {

  return decoration.symbol + input + decoration.symbol;

 }

 decorateFilter.$stateful = true;

 

 return decorateFilter;

}])

.controller('MyController', ['$scope', 'decoration', function($scope, decoration) {

 $scope.greeting = 'hello';

 $scope.decoration = decoration;

}])

.value('decoration', {symbol: '*'});

ログイン後にコピー

結果は次のとおりです:

1

2

No filter: hello

Decorated: *hello*

ログイン後にコピー

次回はangularjsにおけるfilterの一般的な使い方について記事を書きたいと思います。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

VUE3 基本チュートリアル: データ フィルタリングのためのフィルタの使用 VUE3 基本チュートリアル: データ フィルタリングのためのフィルタの使用 Jun 15, 2023 pm 08:37 PM

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

フィルターを使用して Vue でデータの書式設定とデータ フィルターを実装するためのヒント フィルターを使用して Vue でデータの書式設定とデータ フィルターを実装するためのヒント Jun 25, 2023 pm 06:49 PM

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

入門から習得まで、2022 年の最新 5 つの angularjs チュートリアル 入門から習得まで、2022 年の最新 5 つの angularjs チュートリアル Jun 15, 2017 pm 05:50 PM

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

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

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

PHP と AngularJS を使用して Web アプリケーションを構築する PHP と AngularJS を使用して Web アプリケーションを構築する May 27, 2023 pm 08:10 PM

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

PHP と AngularJS を使用してオンライン ファイル管理プラットフォームを開発し、ファイル管理を容易にする PHP と AngularJS を使用してオンライン ファイル管理プラットフォームを開発し、ファイル管理を容易にする Jun 27, 2023 pm 01:34 PM

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

AngularJS の基本の紹介 AngularJS の基本の紹介 Apr 21, 2018 am 10:37 AM

AngularJS の基本の紹介

PHP プログラミングで AngularJS を使用するにはどうすればよいですか? PHP プログラミングで AngularJS を使用するにはどうすればよいですか? Jun 12, 2023 am 09:40 AM

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

See all articles