Filter

AngularJS のフィルターをテストします。
12,345,678 // カンマ区切り 
12.3400 // 少数以下4桁 
$12.34 // 通貨 
¥1,234.00 // 通貨(円記号) 
Dec 31, 2099 // 日付フォーマット 
2099/12/31 // 日付フォーマット 
[1,2,3] // 最初の3件のみ表示 
yamada // 小文字変換 
YAMADA // 大文字変換 
{ "name": "Yamada", "age": 26 } // JSON形式で表示 
[1,2,3,4,5] // ソートして表示 
[5,4,3,2,1] // 逆順ソートして表示

次のリンクをクリックすると "ngp_filter.html" が呼び出されます。
Filter

プログラムの説明

  1. AngularJS サンプルプログラム "ngp_filter.html" です。
    <!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
</head>

<body>
<br>{{12345678|number}}                         // カンマ区切り
<br>{{12.34|number:4}}                          // 少数以下4桁
<br>{{12.34|currency}}                          // 通貨
<br>{{1234|currency:'¥'}}                       // 通貨(円記号)
<br>{{'2099-12-31T12:59:59'|date}}              // 日付フォーマット
<br>{{'2099-12-31T12:59:59'|date:'yyyy/MM/dd'}} // 日付フォーマット
<br>{{[1,2,3,4]|limitTo:3}}                     // 最初の3件のみ表示
<br>{{"Yamada"|lowercase}}                      // 小文字変換
<br>{{"Yamada"|uppercase}}                      // 大文字変換
<br>{{{name:"Yamada", age:26}|json}}            // JSON形式で表示
<br>{{[1,3,5,2,4]|orderBy}}                     // ソートして表示
<br>{{[1,3,5,2,4]|orderBy:'':true}}             // 逆順ソートして表示

</body>
</html>
  2. html で AngularJS を使用することを宣言します。
    head 内で "angular.min.js" を組み込みます。
    <html ng-app>
  3. AngularJS にはデフォルトで幾つかのフィルターが用意されています。
    次のページなどを参考にして下さい。
    Can I do web?
    AngularJS入門
    ANGULAR JS filter

前田稔の超初心者のプログラム入門
超初心者のプログラム入門(JavaScript)