AngularJSには、便利なフィルタが用意されています。
フィルタを使用すれば、日付や通貨のデータを簡単な表記で様々なフォーマットで表示することが出来ます。
AngularJSで日付や通貨を表示する例
例えば、dateに日付オブジェクト、moneyに数値データが入っている場合、以下のようにHTMLテンプレートを書けば、様々なフォーマットで表示することが出来ます。
金額の3桁区切りも簡単です。
{{ today }} {{ today | date: 'medium' }} {{ today | date: 'short' }} {{ today | date: 'fullDate' }} {{ today | date: 'longDate' }} {{ today | date: 'mediumDate' }} {{ today | date: 'shortDate' }} {{ today | date: 'mediumTime' }} {{ today | date: 'shortTime' }} {{ money | currency }}
上記のHTMLはこんな感じで表示されます。
"2015-05-14T03:05:06.806Z" 5/14/15 12:05:06 PM 5/14/15 12:05 PM Thursday, May 14, 2015 May 14, 2015 May 14, 2015 5/14/15 12:05:06 PM 12:05 PM $1,000,000,000.00
HTMLのソースはこんな感じです。
<!doctype html> <html ng-app="app"> <head> <meta charset="utf-8"> <title>test</title> </head> <body> <div ng-controller="TestCtrl"> <p>{{ today | date: 'fullDate' }}</p> <p>{{ money | currency }}</p> </div> <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script> <script> var app = angular.module('app', []); app.controller('TestCtrl', function($scope) { $scope.today = new Date(); $scope.money = 1000000000; }); </script> </body> </html>
日本語表記に切り替える
日付や通貨の表記が英語圏に合わせたものになっていますので、これを日本語圏の表記に切り替えるには、angular-i18nの日本語モジュールを追加読み込みするだけでOKです。
先程のソースの16行目に以下のコードを追加します。
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script> ↓ <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.2.15/angular-locale_ja-jp.js"></script>
たったこれだけで、なんと日本語表記に切り替わりました。
“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のフィルタはとっても便利ですね。
ホームページの制作(デザイン・コーディング・プログラミング)に加え、ネットショップの販売促進に関するアドバイスも致します。 20年以上に渡って実際にネットショップを運営した経験を生かし、聞きかじりではない実績を伴ったノウハウを、自分の言葉でお伝えいたします。 プログラミングの経験は30年以上。HTML、CSS、JavaScript、TypeScript、Vue、NuxtJS、Node.js、MySQL、MongoDB、Elasticsearch、WordPress、PHP、Docker、Electronなど、幅広く対応します。
コメント