Angular.js過濾器(filter)

1.初識Angular.js

2.Angular.js的作用域和數據綁定

在Angular.js裏過濾器是用來格式化數據的，過濾器分內置過濾器和自定義過濾器。

綁定數據時在符號 {{}} 內使用 | 來調用過濾器。

讓我們來認識下過濾器吧

內置過濾器

1.大小寫轉換，uppercase、lowercase

{{ "aaaa" | uppercase }} // AAAA
{{ "BBBB" | lowercase }} // bbbb

2.貨幣格式化，currency

{{123|currency:'￥'}}         // ￥123.00
{{123|currency}}              // $123.00
{{123|currency:'RMB ￥'}}     // RMB ￥123.00 

3.日期格式化，date

{{1427345339072 | date}} // Mar 26, 2015 
{{ 1427345339072 | date:'medium' }} // Mar 26, 2015 12:48:59 PM 
{{ 1427345339072 | date:'short' }} // 3/26/15 12:48 PM
{{ 1427345339072 | date:'fullDate' }} // Thursday, March 26, 2015 
{{ 1427345339072 | date:'longDate' }} // March 26, 2015
{{ 1427345339072 | date:'mediumDate' }} // Mar 26, 2015
{{ 1427345339072 | date:'shortDate' }} // 3/26/15
{{ 1427345339072 | date:'mediumTime' }} // 12:48:59 PM
{{ 1427345339072 | date:'shortTime' }} // 12:48 PM 
四位年份：{{ 1427345339072 | date:'yyyy' }} // 2015
兩位年份：{{ 1427345339072 | date:'yy' }} //15 
一位年份：{{ 1427345339072 | date:'y' }} // 2015 

英文月份：{{ 1427345339072 | date:'MMMM' }} // March 
英文月份簡寫：{{ 1427345339072 | date:'MMM' }} // Mar 
數字月份：{{ 1427345339072 |date:'MM' }} // 03 
一年中的第幾個月份：{{ 1427345339072 |date:'M' }} // 3 

數字日期：{{ 1427345339072|date:'dd' }} // 26 
一個月中的第幾天：{{ 1427345339072 | date:'d' }} // 26
英文星期：{{ 1427345339072 | date:'EEEE' }} // Thursday 
英文星期簡寫：{{ 1427345339072 | date:'EEE' }} // Thu 

24小時制數字小時：{{1427345339072|date:'HH'}} // 12
一天中的第幾個小時：{{1427345339072|date:'H'}} // 12
12小時制數字小時：{{1427345339072|date:'hh'}} // 12
上午或下午的第幾個小時：{{1427345339072|date:'h'}} // 12

數字分鐘數：{{ 1427345339072 | date:'mm' }} // 48
一個小時中的第幾分鐘：{{ 1427345339072 | date:'m' }} // 48 

數字秒數：{{ 1427345339072 | date:'ss' }} // 59 
一分鐘內的第幾秒：{{ 1427345339072 | date:'s' }} // 59
毫秒數：{{ 1427345339072 | date:'.sss' }} // 0.072 

4.數字格式化，number

{{12.13534|number:2}} // 12.14 四捨五入保留兩位小數
{{10000000|number}} // 10,000,000 

5.json格式化

{{ {name: '張三', sex: '男'} | json }}  
// { "name": "張三", "sex": "男" }  json過濾器可以將一個JSON或JavaScript對象轉換成字符串。

6. filter查找

 {{ [{"name": "張三","id": 10},  
{"name": "李四","id": 11},  
{"name": "張五","id": 12}  
] | filter:"張"}}                   
// [{"name":"張三","id":10},{"name":"張五","id":12}] 查找含有有張的行  

7.orderBy

{{ [{"name": "張三","id": 15},  
{"name": "李四","id": 11},  
{"name": "張五","id": 12}  
] | orderBy:'id':true}}   // 降序

{{ [{"name": "張三","id": 15},  
{"name": "李四","id": 11},  
{"name": "張五","id": 12}  
] | orderBy:'id'}}          // 升序  

8.limitTo

{{ [{"name": "張三","id": 15},  
{"name": "李四","id": 11},  
{"name": "張五","id": 12}  
] | limitTo:1}}                    //  [{"name":"張三","id":15}]  返回第一行

 

{{ "ABCDEFGHIJK" | limitTo:5 }} // ABCDE 

自定義過濾器

var app = angular.module('app', []);
// 創建控制器
app.controller('filcon', function ($scope) {
     $scope.name = "張三";
});
// 創建過濾函數
app.filter("addStr", function () {
    var txt = function (param) {
                 return param + " 加李四";
              }
    return txt;
});
 
<div ng-app="app">
    <div ng-controller="filcon">
            {{name | addStr}}
    </div>
</div>
// 張三 加李四  （頁面調用結果）