AngularJSのカスタムフィルターの使用方法を実際のサンプルを使って確認しました。
デモとコードサンプルはこちら。
(1)カスタムフィルターの概要
AngularJSにはビルトインのフィルターが用意されていますが、カスタムフィルターを使って自分でフィルターの処理内容を定義する事が出来ます。
カスタムフィルターは、モジュールのfilterメソッドをファクトリー関数を登録して定義します。
構文
angular.module(‘モジュール名’, [])
.filter(‘フィルター名’, function() {
return function(input, 引数) {
:
return ・・;
};
})
(2)サンプルコード
1)単一の属性値を変換するカスタムフィルター
下記サンプルでは、item.chkの属性値がtrueの場合は、チェックマークのユニコードをリターンします。
(HTML) <td>{{item.chk | checkmark}}</td> (スクリプト) demoApp.filter('checkmark', function() { return function(input) { return input ? '\u2713' : ''; }; });
2)配列データをフィルタリングするカスタムフィルター
下記サンプルでは、配列データを入力データとし、引数として指定した属性(下記サンプルでは’grp’)の値をキーとして、重複したキーのデータを取り除いてリターンしています。
(HTML) <select ng-model="selectGrp" ng-options="item.grp as item.grp for item in products | distinct:'grp'"> <option value="">商品分類を選択してください</option> </select> (スクリプト) demoApp.filter("distinct", function () { return function (data, keyName) { var results = []; var keys = {}; for (var i = 0; i