AngularJSのカスタムフィルターの使用方法

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 < data.length; i++) {
      var val = data[i][keyName];
      if (!keys[val]) {
        keys[val] = true;
        results.push(data[i]);
      }
    }
    return results;
  }
});
関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください