AngularJS Tips - 通貨フィルタ currency を日本円対応する方法

phi phi on AngularJS

かなりピンポイントですがちょっと引っかかったのでメモっておきます.

currency` は, AngularJS がデフォルトで用意してくれていて, 数値を通貨フォーマット変換してくれる便利なフィルタです.
ですが, 当然ながらデフォルトはドル表記です.

これを日本円フォーマットに変更する方法を今回は紹介します.

Runstant

とりあえずデモです. 先頭に ¥ が表示されて, 数値にカンマが差し込まれているのが分かるかと思います.

日本語対応する方法

1. angular-i18n を読みこむ

angular-i18n モジュールの中から日本語用のものを読み込みます.

今回は cdnjs から引っ張ってきてます.

angular-locale_ja-jp.js

これを読みこむだけで諸々日本語化してくれます.

注意点としては, AngularJS 本体を読み込んだ後angular-locale_ja-jp.js を読み込むようにしましょう.

2. currency フィルタを使う

あとは currency フィルタを使うだけです.

<div>円: {{amount | currency}}</div>  

引数で先頭文字を指定できたりもします.

<div>ドル: {{amount | currency:'$'}}</div>