AngularJSのカスタムフィルターの使用方法を実際のサンプルを使って確認しました。

デモとコードサンプルはこちら。
　

（１）カスタムフィルターの概要

　
AngularJSにはビルトインのフィルターが用意されていますが、カスタムフィルターを使って自分でフィルターの処理内容を定義する事が出来ます。
　
カスタムフィルターは、モジュールのfilterメソッドをファクトリー関数を登録して定義します。
　
構文
　
angular.module(‘モジュール名’, [])
.filter(‘フィルター名’, function() {
　return function(input, 引数) {
　　　：
　　return ・・;
　};
})
　

（２）サンプルコード

　
１）単一の属性値を変換するカスタムフィルター
　
下記サンプルでは、item.chkの属性値がtrueの場合は、チェックマークのユニコードをリターンします。
　

（HTML）
<td>{{item.chk | checkmark}}</td>

（スクリプト）
demoApp.filter('checkmark', function() {
  return function(input) {
    return input ? '\u2713' : '';
  };
});

　
２）配列データをフィルタリングするカスタムフィルター
　
下記サンプルでは、配列データを入力データとし、引数として指定した属性（下記サンプルでは’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;
  }
});

関連記事の目次