フィルターを使おう (3/6)
作成:2015-12-19 19:19
更新:2015-12-19 19:19
更新:2015-12-19 19:19
■値にフィルターをかける
では、フィルターを利用してデータを表示させてみましょう。HTMLファイルのサンプルを下に掲載しておきました。このようにソースコードを書き換え、ブラウザで表示してみてください。
今回は、PRICEとDATEの項目にフィルターを設定しておきました。それぞれの出力をしている部分を見てみましょう。
●PRICEの出力
●DATEの出力
ところで、dateの値はタイムスタンプの整数値でしたね。dateフィルターを利用すると、タイムスタンプを元にDateオブジェクトを生成し、それを元に指定の型式にフォーマットしたテキストを得ることができます。
このように、フィルターを使うと、ただの数値が金額表記になったり日付になったりして表示させることができるのです。なかなか便利ですね？
今回は、PRICEとDATEの項目にフィルターを設定しておきました。それぞれの出力をしている部分を見てみましょう。
●PRICEの出力
{{obj.price | currency:'¥'}}obj.priceの後に「currency」というフィルターを設定してあります。これは、数値を金額としてフォーマットし表示するフィルターです。フィルターによっては、必要な値を用意するものがあります。このcurrencyもその一つで、'¥'と指定することで、円表記に設定できます。出力された表示を見ると、「¥7,800.00」といった型式で表示されるのがわかるでしょう。●DATEの出力
{{obj.date | date:'yyyy-MM-dd'}}obj.dateの後に「date」というフィルターが設定されています。これはDateオブジェクトの値を特定の型式にフォーマットするためのフィルターです。ここでは、'yyyy-MM-dd'と設定してありますね。これにより、例えば「2015-12-14」といった型式で日付が表示されます。ところで、dateの値はタイムスタンプの整数値でしたね。dateフィルターを利用すると、タイムスタンプを元にDateオブジェクトを生成し、それを元に指定の型式にフォーマットしたテキストを得ることができます。
このように、フィルターを使うと、ただの数値が金額表記になったり日付になったりして表示させることができるのです。なかなか便利ですね？
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<!doctype html>
<html>
<head>
<title>AngularJS Sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
<style>
body { color:gray; }
h1 { font-size:18pt; font-weight:bold; }
span.label { display:inline-block;width:50px; color:red; }
input { width:100px; }
.msg { font-size:14pt; font-weight:bold;color:gray; }
th { color:#eee; background-color:#999; padding: 5px 10px;}
td { color:#333; background-color:#ddd; padding: 5px 10px;}
</style>
</head>
<body ng-app="myapp" ng-init="num=0">
<h1>データ表示</h1>
<div ng-controller="HeloController as ctl">
<table>
<tr><th>ID</th><th>NAME</th><th>PRICE</th><th>GET?</th><th>DATE</th></tr>
<tr ng-repeat="obj in ctl.data">
<td>{{obj.id}}</td>
<td>{{obj.name}}</td>
<td>{{obj.price | currency:'¥'}}</td>
<td>{{obj.get}}</td>
<td>{{obj.date | date:'yyyy-MM-dd'}}</td>
</tr>
</table>
</div>
</body>
</html>
※関連コンテンツ