つかびーの技術日記

情報系修士卒のWeb系技術日記です。現在のフォーカス分野はアドテクです。

AngularJSのfilterフィルタの使い方

   

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

filter一覧、まとめ

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

Filter components in ng

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

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

AngularJS 地味だけど知っておきたい filter 機能 – Can I do web?

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

AngularJSでカスタムfilterを書いてみよう – AngularJS Ninja

filterフィルタで絞り込み方を調整する

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

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

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

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

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

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

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

filterフィルタをJavaScriptで使う

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

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

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

filterフィルタで厳密な比較を行う

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

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

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

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

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

 - JavaScript