Filter

AngularJS のフィルターをテストします。

次のリンクをクリックすると "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}}                         // カンマ区切り => 12,345,678
    <br>{{12.34|number:4}}                          // 少数以下4桁 => 12.3400
    <br>{{12.34|currency}}                          // 通貨 => $12.34
    <br>{{1234|currency:'¥'}}                       // 通貨(円記号) => \1,234.00
    <br>{{'2099-12-31T12:59:59'|date}}              // 日付フォーマット => Dec 31, 2099
    <br>{{'2099-12-31T12:59:59'|date:'yyyy/MM/dd'}} // 日付フォーマット => 2099/12/31
    <br>{{[1,2,3,4]|limitTo:3}}                     // 最初の3件のみ表示 => [1,2,3]
    <br>{{"Yamada"|lowercase}}                      // 小文字変換 => yamada
    <br>{{"Yamada"|uppercase}}                      // 大文字変換 => YAMADA
    <br>{{{name:"Yamada", age:26}|json}}            // JSON形式で表示 => { "name": "Yamada", "age": 26 }
    <br>{{[1,3,5,2,4]|orderBy}}                     // ソートして表示 => [1,2,3,4,5]
    <br>{{[1,3,5,2,4]|orderBy:'':true}}             // 逆順ソートして表示 => [5,4,3,2,1]
    
    </body>
    </html>
    
  2. html で AngularJS を使用することを宣言します。
    head 内で "angular.min.js" を組み込みます。
    <html ng-app>
    
  3. AngularJS にはデフォルトで幾つかのフィルターが用意されています。
    次のページなどを参考にして下さい。
    Can I do web?
    AngularJS入門
    ANGULAR JS filter

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