2014/3/5

AngularJSのfilterフィルタの使い方

AngularJSには便利なフィルタという機能が存在します。特定のルールによって値をフォーマットしたり、絞り込んだりしてくれます。今日はそのフィルタの中でもfilterというフィルタ(filterフィルタ)の話をします。

AngularJSはデフォルトでいくつかのフィルタを持っています。

filter, currency, numberなどいろいろありますが、currencyなんかわかりやすいと思います。与えた値に$をつけてくれるフィルタですね。

フィルタの説明は以下のサイトなんかが良いと思います。

独自のフィルタを作るなら以下のサイトが参考になります。

フィルタは色々なサイトで説明されているのでもう十分かと思いますが、filterフィルタで少し苦戦したので、その点について書いていきます。

filterフィルタは配列から条件にマッチする要素だけを抜き出す、まさしくフィルタなフィルタですが、

<li ng-repeat="item in items | filter:'hoge'"></li>

などと書く場合は少し注意が必要です。

itemがobjectで複数のプロパティを持っている場合、それら全てのプロパティのどれかに合致するかどうかマッチングするためです。

以下に例を作成しました。

Case 1がフィルタ前の値です。Case 3では”130”という値で絞り込みを行っています。130はpriceプロパティの値ですが、マッチしています。もしnameプロパティだけでフィルタリングしたいのであれば、これは意図しない挙動となるため、要注意です。

ではどうするかというと、Case 4のように、検索条件を「filter:{name:‘hoge’}」というようにobjectにすればOKです。

全てのフィルタはHTMLのディレクティブ上だけでなく、JavaScript上で使うことができます。

どうするかというと、上記のCase 5のように

$filter("filter")(array, expression)

とすればOKです。フィルタリングされた配列が戻ってきます。$filterを冒頭のfunctionの仮引数部に記述してInjectするのをお忘れなく。

上記の例は文字列”ap”によって部分一致を行っていますが、厳密に一致している場合にマッチしたとみなしたい場合もあるかと思います。(“ap”ではなく”Grape”と入力されたら、それをマッチしたとみなす)

そんなときはfilter関数の第三引数をtrueにすればOKです。

“ap”によるフィルタリングでは大文字が含まれている”Apple”もマッチしたことになっています。大文字と小文字を区別する場合は残念ながら、独自のcomparatorを作るしかないようです。

上記の例ではmyComparatorを作成してHTMLのディレクティブ上で使用しています。indexOfであれば大文字、小文字を区別して含まれているかどうかが判定できます。

filterフィルタは他のフィルタよりも少し複雑ですが、それでも一度理解してしまえば簡単です。この記事が誰かの助けになれば幸いです。