AngularJS TIPS
パラメーターを持ったフィルターを定義するには？（filter／identity／noopメソッド）
独自のパラメーター付きフィルターを作成するための基本的な手順を説明。サンプルとしてmapフィルターを作成し、これを使って配列の数値の2乗を計算してみる。
フィルターにはlimitTo／orderBy／filterなどのように、パラメーターを受け取れるものがあります。本稿では、そのようなパラメーター付きフィルターを定義する方法について解説します。
サンプルには、以下のようなmapフィルターを独自に定義して利用します。与えられた配列から要素を順に取り出し、決められた規則で加工した結果を返す――mapメソッド（JavaScriptのArrayオブジェクト）のフィルター版です。
［構文］本稿で自作するmapフィルター
{{ array | map ［:callback]}}
- array： 処理対象の数値配列
- callback： 配列を加工するためのコールバック関数
では、具体的なサンプルを見ていきます。
|
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body ng-controller="MyController">
<!--5加工した配列の内容を順番に取得-->
<ul>
<li ng-repeat="value in data | map: myFunc">{{value}}</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script>
angular.module('myApp', [])
// mapフィルターを定義
.filter('map', function() {
// 1引数callbackを受け取れるように
return function(array, callback) {
// 加工対象の値が配列であるかを判定
if (!angular.isArray(array)) {
return array;
}
// 2引数callbackが空の場合は、デフォルト関数をセット
callback = callback || angular.identity;
// 3mapメソッドで配列を加工
return array.map(callback);
};
})
.controller('MyController', ['$scope', function($scope) {
$scope.data = [1, 5, -3, 12];
// 4mapフィルター（メソッド）に渡すコールバック関数
$scope.myFunc = function(value, index, array) {
return value * value;
};
}]);
</script>
</body>
</html>
|
パラメーターを受け取れるようにするには、フィルター関数の第2引数以降を利用します。ここでは、引数callbackが相当します（1）。
2は引数callbackが省略された場合の、デフォルト値の設定です。angular.identityメソッドは、与えられた引数を何もせずにそのまま返すだけの関数です。このように、コールバック関数のデフォルトの挙動を表すために、よく利用します。
［Note］angular.noopメソッドについて
同じような目的を持ったプロパティとして、angular.noopメソッドもあります。angular.noopメソッドは「何も返さない」関数を表します（与えられた引数をそのまま返すこともありません）。identityメソッドと並んで、コールバック関数のデフォルト挙動を表すためによく利用するので、覚えておくとよいでしょう。
コールバック関数を準備できたら、あとはArray#mapメソッドを呼び出して、配列を加工し、その結果を返すだけです（3）。これはmapメソッドのルールですが、コールバック関数は、以下の条件を満たしている必要があります（4）。
- 引数は、先頭から「要素値」「インデックス番号」「元の配列」を受け取る
- 戻り値は、加工後の要素値
本サンプルの例では、受け取った値を2乗した結果を返しています。
なお、配列を返すフィルターは、5のように、一般的にng-repeatディレクティブとセットで利用します。
処理対象：カスタムフィルター カテゴリ：基本
API：angular.Module カテゴリ：ng（コアモジュール） > type（型）
API：$filterProvider カテゴリ：ng（コアモジュール） > provider（プロバイダー）
API：angular.identity｜angular.noop カテゴリ：ng（コアモジュール） > function（関数）
API：ng-repeat（ngRepeat） カテゴリ：ng（コアモジュール） > directive（ディレクティブ）
※以下では、本稿の前後を合わせて5回分（第44回～第48回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
44. AngularJSアプリでjQueryを利用するには？（element／ng-jq）
HTML DOMツリーを直接操作したい場合に、標準のjqLiteではなく、高機能なjQueryを使う方法を解説。常にjqLiteにする方法や、jQueryバージョンを固定する方法も説明する。
46. 【現在、表示中】≫ パラメーターを持ったフィルターを定義するには？（filter／identity／noopメソッド）
独自のパラメーター付きフィルターを作成するための基本的な手順を説明。サンプルとしてmapフィルターを作成し、これを使って配列の数値の2乗を計算してみる。
47. 既存のフィルターを利用して新たなフィルターを定義するには？（$filterサービス）
既存フィルターの機能を活用する独自のフィルターを作成するための基本的な手順を解説。サンプルとしてbyte単位の数値をMbyte単位に変換するmegaByteフィルターを作成する。
