MEANスタックを用いたWebアプリの開発方法について紹介していく本連載。今回は、AngularJSでもよく使用する機能であるフィルタの使い方とそのカスタマイズ方法、そして、独自で定義するディレクティブ(カスタムディレクティブ)の作成について解説。
MEANスタックを用いたWebアプリの開発方法について紹介していく本連載「MEANスタックで始めるWebアプリ開発入門」。前回の記事、「AngularJSの「サービス」で理解するDI(Dependency Injection:依存性注入)の基本」では、AngularJSにおけるDIとサービスの使い方について解説しました。
今回はAngularJSでもよく使用する機能であるフィルタの使い方とそのカスタマイズ方法、そして、独自で定義するディレクティブ(カスタムディレクティブ)の作成について解説します。
なお、本記事を見て実際にサンプルを動かしたい場合は、以前の連載記事(第1回、第2回)を見て環境を作成しておきましょう。
AngularJSには、「フィルタ」という、データ整形のための機能をデフォルトで持っています。フィルタを使用することでモデルの値を変更せずにデータを絞り込んだり、フォーマットを変更したりすることが可能です。
フィルタは幾つかの方法で使用できますが、HTMLのエクスプレッション構文(「{{」と「}}」)で、「|」(パイプ)を使ってフィルタを記述するのが一般的です。
<!-- {{ モデル名 | フィルタ名}} --> {{ sampleModel | currency }}
AngularJSではデフォルトでフィルタが用意されています。幾つか紹介しましょう。
currencyフィルタは、通貨を表示するためのフィルタです。フィルタを適用すると、モデルに対して通貨用のフォーマットを適用します。
上記のように、デフォルトでは値の先頭に「$」、3桁ごとに「,」(カンマ)が挿入されますが、これはUSドルのフォーマットです。日本用の円表記フォーマットにするには、別途i18n用のファイルを使用する必要があります。
ここからは、currencyフィルタを使います。まずは円表記にするために、i18n用のファイルを用意します。AngularJSをインストールしたときと同じく、bowerを使ってangular-i18nをインストールしましょう。
% cd path/your/sample-angular % bower install angular-i18n
htmlファイルを下記のように記述します。
- <!DOCTYPE html>
- <html ng-app='mySimpleApp'>
- <head>
- <script src="bower_components/angular/angular.js"></script>
- <!-- i18n用ファイルを読み込み -->
- <script src="bower_components/angular-i18n/angular-locale_ja-jp.js"></script>
- </head>
- <script>
- var myApp = angular.module('mySimpleApp', []);
- myApp.controller('myController',function ($scope) {
- $scope.price = 1000;
- });
- </script>
- <body ng-controller="myController">
- <input type="text" ng-model="price">
- <p>currencyフィルタ未適用 : {{price}}</p>
- <p>currencyフィルタ適用 : {{price | currency}}</p>
- </body>
- </html>
Bowerでインストールしたangular-locale_ja-jp.js(i18nのファイル)はangular.jsより後で読み込みます。このファイルがあるだけで、currencyの表示が円表記になります。
dateフィルタもよく使用するフィルタの1つです。これは日付を任意のフォーマットで表示するためのもので、自分でフォーマットを指定したり、デフォルトで用意されているフォーマットを使ったりすることができます。
- ・
- ・
- <script>
- var myApp = angular.module('mySimpleApp', []);
- myApp.controller('myController',function ($scope) {
- $scope.dt = new Date();
- });
- </script>
- <body ng-controller="myController">
- <input type="text" ng-model="price">
- <p>dateフィルタ未適用 : {{dt}}</p>
- <p>dateフィルタ適用 (fullDate) : {{dt | date : 'fullDate'}}</p>
- <p>dateフィルタ適用 (フォーマット指定) : {{dt | date : 'yyyy/MM/dd'}}</p>
- </body>
- </html>
フォーマットはドキュメントにあるように、さまざまな種類があります。状況に応じて使い分けてください。
Copyright © ITmedia, Inc. All Rights Reserved.
HTML5�ス蛛スX 髫ェ蛟�スコ荵斟帷ケ晢スウ郢ァ�ュ郢晢スウ郢ァ�ー