Angular.js の日付や通貨表示のフィルタを日本語表記に対応させる方法

AngularJSには、便利なフィルタが用意されています。

フィルタを使用すれば、日付や通貨のデータを簡単な表記で様々なフォーマットで表示することが出来ます。

AngularJSで日付や通貨を表示する例

例えば、dateに日付オブジェクト、moneyに数値データが入っている場合、以下のようにHTMLテンプレートを書けば、様々なフォーマットで表示することが出来ます。
金額の3桁区切りも簡単です。

上記のHTMLはこんな感じで表示されます。

HTMLのソースはこんな感じです。

日本語表記に切り替える

日付や通貨の表記が英語圏に合わせたものになっていますので、これを日本語圏の表記に切り替えるには、angular-i18nの日本語モジュールを追加読み込みするだけでOKです。

先程のソースの16行目に以下のコードを追加します。

たったこれだけで、なんと日本語表記に切り替わりました。

“2015-05-14T02:50:30.667Z”
2015/05/14 11:50:30
2015/05/14 11:50
2015年5月14日木曜日
2015年5月14日
2015/05/14
2015/05/14
11:50:30
11:50
¥1,000,000,000.00

サンプルはこちら

こうした定型のフォーマット以外にも、独自のフォーマットで表示することも可能です。
日付であれば、以下のページを参考にすれば簡単にカスタマイズできると思います。
date | AngularJS 1.2 日本語リファレンス | js STUDIO:

AngularJSのフィルタはとっても便利ですね。

スポンサーリンク
広告(大)
広告(大)

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
広告(大)