フィルターとは

与えられたデータを整形するための仕組み。
Angular式(テンプレート上)で使うこともでき、コントローラやサービス(JavaScript上)でも使うことができる。
フィルターは様々な種類がある。AngularJS標準で提供されて入るものもあるし、自作することもできる。

基本的な使い方

テンプレートからフィルターを使う

構文

{{expression | filterName [:param1 [:param2...]]}}

expression:整形対象のデータ
filterName:フィルター名
param1,param2...:フィルターのパラメータ

パラメータは必要に応じて指定します。(必要ない場合はなしでよいです)

例えば、AngularJS標準で提供されているlowercaseフィルターを例にします。
lowercaseフィルターは、大文字を小文字に変換します。

html

<!-- strには"ABCDE"が入っています -->

{{str | lowercase}}

browser

abcde

JavaScriptからフィルターを使う

構文

$filter(filterName)(expression [:param1 [:param2...]])

expression:整形対象のデータ
filterName:フィルター名
param1,param2...:フィルターのパラメータ

$filterサービスを利用します。
テンプレートで使用するときと同様、パラメータは必要に応じて指定します。

こちらでも、lowercaseフィルターを例にします。

var str = "ABCDE";
console.log($filter('lowercase')(str));

console

abcde

様々なフィルター

AngularJS標準で提供されているフィルター以下のようなものがあります。

フィルター名	概要
lowercase	大文字を小文字に変換する。
uppercase	小文字を大文字に変換する。
json	オブジェクトをJSON形式の文字列に変換する。オブジェクトに関数が含まれる場合は、その関数は無視される
orderBy	配列を指定する条件でソートする。
filter	配列を指定する条件でフィルタリングする。
currency	通貨形式に整形する。
date	日付を整形する。
number	数値を文字列として整形する。

他にも様々あります。

フィルターを自作する

フィルターを自作するにはModuleオブジェクトのfilterメソッドを使用します。
フィルターをモジュールに登録します。

構文

filter(name, factory)

name:フィルター名
factory:フィルター関数を生成するファクトリー関数

factoryには、フィルターを生成するための関数を指定します。

以下、例です。

1: angular.module('myApp' , [])
2:   .filter('myFilter', function(){
3:     return function(value){
4:       // filterの処理
5:       return filteredValue;
6:     }
7:   });

L2でfilterメソッドを使用しています。
ここで引数にしているfunctionは、フィルター関数ではなく、フィルター関数を返すための関数です。
このfunctionでreturnしているもの(L3~)がフィルター関数です。
フィルター関数であることの条件は2つあります。

フィルターの整形対象となるデータを第一引数として受け取ること(L3:value)
戻り値として整形したあとのデータを返すこと(L5:filteredValue)

このようにして定義すると、AngularJS標準で提供されているフィルターと同じように使用できます。