AngularJS TIPS
既存のフィルターを利用して新たなフィルターを定義するには？（$filterサービス）
既存フィルターの機能を活用する独自のフィルターを作成するための基本的な手順を解説。サンプルとしてbyte単位の数値をMbyte単位に変換するmegaByteフィルターを作成する。
フィルターを定義する場合、常に一から作成する必要はありません。すでに類似の機能を持ったフィルターが存在するならば、それらの機能を利用させてもらいながら、差分の機能だけを実装すべきです。これによってコードそのものもシンプルになりますし、何よりわざわざ車輪の再発明をして、無用なバグが混入する原因にする必要はありません。
本稿では、その具体的な方法を解説していきます。紹介するサンプルは、既存のnumberフィルターを利用して、与えられた値（単位はbyte）をMbyteに加工するmegaByteフィルターです。
［構文］本稿で自作するmegaByteフィルター
{{value | megaByte [:fraction]}}
- value： 演算対象の数値
- fraction： 小数点以下の最大桁数（デフォルトは
numberフィルターのデフォルト値）
以下は、その具体的なコードです。
|
<!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サービスを利用します。
［構文］$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］を参照してください。
46. パラメーターを持ったフィルターを定義するには？（filter／identity／noopメソッド）
独自のパラメーター付きフィルターを作成するための基本的な手順を説明。サンプルとしてmapフィルターを作成し、これを使って配列の数値の2乗を計算してみる。
47. 【現在、表示中】≫ 既存のフィルターを利用して新たなフィルターを定義するには？（$filterサービス）
既存フィルターの機能を活用する独自のフィルターを作成するための基本的な手順を解説。サンプルとしてbyte単位の数値をMbyte単位に変換するmegaByteフィルターを作成する。
49. AngularJSを手動で起動するには？（bootstrap）
通常は自動起動するAngularJSを手動で起動するにはangular.bootstrapメソッドを使用する。その基本的な使い方を解説。
