AngularJS 地味だけど知っておきたい filter 機能

前回から間があいてしまいましたが。。。

今回はAngularJS が提供している filter についてまとめてみました。

まとめたものがコチラ

デフォルトで用意されているのは以下です。

lowercase
uppercase
json
currency
date
limit
number
orderBy

これら以外にも自分で実装することもできますが、今回は説明しません。
徐々に紹介していけたらと思っています。

主観ですが、date, limit, orderBy が非常に優秀だと感じました。

lowercase / uppercase

{{ plainText | lowercase }}
{{ plainText | uppercase }}

これ日本語という観点で考えると使い道が。。。使う頻度は少ないと思います。

json

{{ jsonFilter | json }} // ※jsonFilter はハッシュオブジェクト

これは、ハッシュオブジェクトを json オブジェクトに変換するのに役立ちます。
ただし、ハッシュオブジェクト内に json 形式でないオブジェクト（functionなど）があると、json オブジェクトには変換されません。
多くのアプリやサービスでは、データのやり取りの多くが json オブジェクトだったりしますので、利用する機会はあるかと思います。

currency

default($) : {{amount | currency }}
custom (¥) : {{amount | currency:"¥" }}

通貨単位（デフォルトは「$」）をくっつけてくれたり、$1,000 のように３桁ごとに「,」区切りにしてくれたりします。もちろん「¥」に変更することもできます。
ただ、¥1,000.00 となってしまって、最後の .00 要らない・・・となってしまい、スマートに取り除く方法がわかりませんでした。（誰かこっそり教えてください）

date

{{ dateFilter | date:'medium' }}
{{ dateFilter | date:'yyyy-MM-dd HH:mm:ss Z' }}
{{ dateFilter | date:'yyyy年MM月dd日' }}

これはそのままでも使えるのですが、localization することで非常に使い勝手がよくなります。年月日を表示したいだけに使うならこのままでも問題ありません。曜日を表示したい場合は、やはり localization する必要があります。
localization の方法については次回に紹介しようと思ってます。

limit

{{ arrays | limitTo:limit }}

指定した数値で配列の表示件数を制限してくれます。

number

{{val | number}}
{{val | number:0}}
{{-val | number:4}}

小数点以下の表示桁数の制御等を指定できます。
計算結果を表示する際にこの filter を通しておけば、33.333... のようなレイアウト崩れを防げたりできるのではないでしょうか。

orderBy

<p><button ng-click="order='name'">order by name</button><button ng-click="order='id'">order by id</button></p>
<ul ng-repeat="data in sampleData | orderBy: order">
<li>name : {{data.name}}, id: {{data.id}}</li>
</ul>

ng-click を利用してソート対象を切り替えていてるのですが、実際にソートする箇所は ng-repeat と組み合わせて利用します。これがホントに優秀で、配列になっているハッシュオブジェクトであれば、keyを指定すればソートしてくれます。引数に「reverse」とすることで逆順にソートもできてしまいます。

リストの絞り込み

<ul ng-repeat="data in sampleData2 | filter:search">
  <li>{{data.name}}
</ul>

サンプルの最後に、表示されているリストを絞り込むサンプルを作ってみました。

入力値でフィルタリングされるので、絞り込みのUIを実現できます。

filter まとめ

まー、地味です。とはいえ、知らないで同じような機能を自身で実装してしまったら最悪です。「ちょっと書いたらできたし・・・」的な後悔とヘコみっぷりが半端ないです。
データをちょっと加工したい、そう思ったらこの filter を１度チェックしてみるとよいかもしれません。

Can I do web?

AngularJS 中心の不定期ブログ