【AngularJS】currencyフィルターで通貨表示をする方法

AngularJSには色々と便利なフィルターが存在します。

JSONオブジェクトに変換してくれたり、大文字に変換してくれたりなど、JavaScriptらしいフットワークの軽さがとても便利ですよね。

中には通貨単位での表示をしてくれるものもあります。
例えば、$1,234とか¥1,000とかです。

ちょっとプライベートで確認する機会がありましたので、今回はAngularJSのcurrencyフィルターで通貨表示をする方法についてご紹介しますね。

ちなみに、公式のドキュメントはこちらです。
参考：AngularJS : Developer Guide : Filters

基本形の確認

AngularJSのcurrencyフィルターの基本形の例は以下となります。

これで「¥1,234」と表示されます。

この基本形の見方についてですが、以下のような構造になっています。

改めてさきほどの例を見てみましょう。

つまり、

という意味になります。

そのため、「¥1.234」という表示になるという訳です。

オプションの有無による違い

せっかくですので、先ほどの基本形を例に、オプションの有無が表示にどのような影響を与えるのか確認してみましょう。

オプションの有無等で結果はそれぞれ以下のようになります。

通貨記号を指定しない場合は、デフォルトで「$」が付加されます。

先ほど見たように、明示的に通貨記号を指定すると、その記号で表示されます。

通貨記号に「undefined」を指定すると、デフォルトの「$」が付加されました。

小数点第3位までを指定すると、このように表示されます。
小数点以下が0でも指定した桁数まで表示されるので、桁数を揃えるのに便利ですね。

おまけとして、通貨記号にはこのような単位も付加できます。

終わりに

今回はAngularJSのcurrencyフィルターで通貨記号をつける方法についてご紹介しました。

基本形はこちらですので、目的に合わせて調整してみてください。

今回はここまでです。それでは。