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

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

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

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

{{ 式 | フィルタ }}

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

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

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

結果は次のとおりです:

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

<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

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

結果は次のとおりです:

No filter: hello
Reverse: olleh
Reverse + uppercase: OLLEH
Reverse, filtered in controller: olleh

ステートフルフィルター

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

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

インデックス、html

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

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: '*'});

結果は次のとおりです:

No filter: hello
Decorated: *hello*

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