AngularJSを使いこなすなら絶対に知っておきたいフィルタとカスタムディレクティブの基本：MEANスタックで始めるWebアプリ開発入門（10）（1/3 ページ）

MEANスタックを用いたWebアプリの開発方法について紹介していく本連載。今回は、AngularJSでもよく使用する機能であるフィルタの使い方とそのカスタマイズ方法、そして、独自で定義するディレクティブ（カスタムディレクティブ）の作成について解説。

» 2016年08月16日 05時00分 公開
[中村修太，クラスメソッド]

　MEANスタックを用いたWebアプリの開発方法について紹介していく本連載「MEANスタックで始めるWebアプリ開発入門」。前回の記事、「AngularJSの「サービス」で理解するDI（Dependency Injection：依存性注入）の基本」では、AngularJSにおけるDIとサービスの使い方について解説しました。

　今回はAngularJSでもよく使用する機能であるフィルタの使い方とそのカスタマイズ方法、そして、独自で定義するディレクティブ（カスタムディレクティブ）の作成について解説します。

　なお、本記事を見て実際にサンプルを動かしたい場合は、以前の連載記事（第1回、第2回）を見て環境を作成しておきましょう。

ビルトイン（デフォルト）のフィルタを使う

　AngularJSには、「フィルタ」という、データ整形のための機能をデフォルトで持っています。フィルタを使用することでモデルの値を変更せずにデータを絞り込んだり、フォーマットを変更したりすることが可能です。

　フィルタは幾つかの方法で使用できますが、HTMLのエクスプレッション構文（「{{」と「}}」)で、「|」（パイプ）を使ってフィルタを記述するのが一般的です。

<!-- {{ モデル名 | フィルタ名}} -->
{{ sampleModel | currency }}

　AngularJSではデフォルトでフィルタが用意されています。幾つか紹介しましょう。

通貨を表示する「currency」フィルタ

　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」フィルタ

　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>

　フォーマットはドキュメントにあるように、さまざまな種類があります。状況に応じて使い分けてください。

　　　　　　 1|2|3 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.

＠IT

@ITについて

RSSについて

アイティメディアIDについて

メールマガジン登録

＠ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。