Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
AngularJS TIPS

AngularJS TIPS

既存のフィルターを利用して新たなフィルターを定義するには?($filterサービス)

2016年3月7日

既存フィルターの機能を活用する独自のフィルターを作成するための基本的な手順を解説。サンプルとしてbyte単位の数値をMbyte単位に変換するmegaByteフィルターを作成する。

  • このエントリーをはてなブックマークに追加

 フィルターを定義する場合、常に一から作成する必要はありません。すでに類似の機能を持ったフィルターが存在するならば、それらの機能を利用させてもらいながら、差分の機能だけを実装すべきです。これによってコードそのものもシンプルになりますし、何よりわざわざ車輪の再発明をして、無用なバグが混入する原因にする必要はありません。

 本稿では、その具体的な方法を解説していきます。紹介するサンプルは、既存のnumberフィルターを利用して、与えられた値(単位はbyte)をMbyteに加工するmegaByteフィルターです。

[構文]本稿で自作するmegaByteフィルター

{{value | megaByte [:fraction]}}

  • value: 演算対象の数値
  • fraction: 小数点以下の最大桁数(デフォルトはnumberフィルターのデフォルト値)

 以下は、その具体的なコードです。

HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body ng-controller="MyController">
<ul>
  <li>{{data | megaByte}} MB</li>
  <li>{{data | megaByte: 1}} MB</li>
  <li>{{data | megaByte: 5}} MB</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script>
angular.module('myApp', [])
  // 1フィルターで利用する$filterサービスを注入
  .filter('megaByte', ['$filter', function($filter) {
    return function(value, fraction) {
      // 加工対象の値が数値であるかを判定
      if (!angular.isNumber(value)) {
        return value;
      }
      // 2Mbyte単位に換算した後、numberフィルターを実行
      return $filter('number')(value / 1024 / 1024, fraction);
    };
  }])
  .controller('MyController', ['$scope', function($scope) {
    $scope.data = 234945312;
  }]);
</script>
</body>
</html>
既存のフィルターを利用するためのコード(filter.html)
Mbyte単位に加工された値
Mbyte単位に加工された値

 既存のフィルターを呼び出すには、$filterサービスを利用します。

[構文]$filterサービス

$filter(name)(args, ...)

  • name: フィルター名
  • args: フィルターに渡すパラメーター

 $filterサービスを利用するには、ファクトリー関数(filterメソッドの直接の引数)に対して、配列アノテーションとしてサービスを注入しておきます(1)。$filterサービスを注入するのは、フィルター関数に対してではない点に注意してください。

 あとは、$filterサービスで、ここではbyte単位の値をMbyte単位に計算した結果を、numberフィルターに渡すだけです(2)。引数fractionは、そのままnumberフィルターに渡すだけなので、エラー処理やデフォルト値の設定も、numberフィルターの側に委ねるものとします。

処理対象:フィルタリング カテゴリ:基本
処理対象:カスタムフィルター カテゴリ:基本
API:angular.Module カテゴリ:ng(コアモジュール) > type(型)
API:$filterProvider カテゴリ:ng(コアモジュール) > provider(プロバイダー)
API:$filter カテゴリ:ng(コアモジュール) > service(サービス)
API:number カテゴリ:ng(コアモジュール) > filter(フィルター)

※以下では、本稿の前後を合わせて5回分(第45回~第49回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

AngularJS TIPS
45. フィルターを自作するには?(filterメソッド)

独自のフィルターを作成するための基本的な手順を説明する。サンプルとして文字列の前後にある空白を除去するtrimフィルターを作成する。

AngularJS TIPS
46. パラメーターを持ったフィルターを定義するには?(filter/identity/noopメソッド)

独自のパラメーター付きフィルターを作成するための基本的な手順を説明。サンプルとしてmapフィルターを作成し、これを使って配列の数値の2乗を計算してみる。

AngularJS TIPS
47. 【現在、表示中】≫ 既存のフィルターを利用して新たなフィルターを定義するには?($filterサービス)

既存フィルターの機能を活用する独自のフィルターを作成するための基本的な手順を解説。サンプルとしてbyte単位の数値をMbyte単位に変換するmegaByteフィルターを作成する。

AngularJS TIPS
48. thisキーワードの参照先を固定するには?(bindメソッド)

分脈により変換する「this」。その問題を解消するangular.bindメソッドの基本的な使い方を解説する。

AngularJS TIPS
49. AngularJSを手動で起動するには?(bootstrap)

通常は自動起動するAngularJSを手動で起動するにはangular.bootstrapメソッドを使用する。その基本的な使い方を解説。

サイトからのお知らせ

Twitterでつぶやこう!