第219天：Angular---過濾器

 在Angular中，過濾器的功能主要是格式化資料表達式，且可以自定義過濾器。作用域(scope)主要服務于頁面模闆，在控制器和頁面中起橋梁作用，儲存模闆中的資料對象，為模闆中的元素提供方法和屬性。

一、過濾器的表現形式

在angular中有三種變現形式，通過管道字元 “  |  ”，與需要處理的代碼進行連接配接，看代碼：

1、單個過濾器，如：{{表達式 | 過濾器名}}

貨币過濾器     {{8.88 | currency}}  // $8.88

2、多個過濾器，如：{{表達式 | 過濾器名1 | 過濾器名2 | ...}}

   {{8.88 | currency | filter | ...}}

3、帶參數過濾器,如：{{表達式 | 過濾器名1 : 參數1 : 參數2 : ...}}

   {{8.88 | number : 1}}

二、angular中自帶的九種過濾器

1、currency格式化數字為貨币格式。

1  {{  8.88 | currency  }}//  預設為$8.88
2 
3  {{  8.88 | currency  ： "￥"}} // ￥8.88      

2、lowercase過濾器将字元串格式化為小寫

1 姓名為{{ lastName | lowercase }} // zhang    $scope.lastName="ZHANG"      

3、uppercase過濾器将字元串格式化為大寫

{{ lastName | uppercase }} // ZHANG    $scope.lastName="zhang"      

4、orderBy過濾器根據表達式排列數組

1 // 根據id降序排序
 2 
 3 {{[{"age":20,"id":10,"name":"iphone"},
 4 
 5 {"age":12,"id":11,"name":"sunm xing"},
 6 
 7 {"age":44,"id":12,"name":"test abc"}]
 8 
 9 |   orderBy:'id':true}}
10 
11 // 根據id升序排序
12 
13 {{[{"age":20,"id":10,"name":"iphone"},
14 
15 {"age":12,"id":11,"name":"sunm xing"},
16 
17 {"age":44,"id":12,"name":"test abc"}]
18 
19 |   orderBy:'id'}}      

5、filter查找

1 // 查找name為iphone的行
2 
3 {{[{"age":20,"id":10,"name":"iphone"},
4 
5 {"age":12,"id":11,"name":"sunm xing"},
6 
7 {"age":44,"id":12,"name":"test abc"}]
8 
9 |filter:{'name':'iphone'}}}//輸出的話就是{"age":20,"id":10,"name":"iphone"}      

6、limitTo 截取

1 {{"1234567890"|limitTo:6}}// 從前面開始截取6位
2 
3 {{"1234567890"|limitTo:-4}}// 從後面開始截取4位      

7、date 時間格式化

1 {{1490161945000 | date:"yyyy-MM-dd HH:mm:ss" }}// 2017-03-22 13:52:25      

8、number 格式化（保留小數）

1 {{149016.1945000|number:2}}   //149016.19      

9、 json   (格式化json對象)

json過濾器可以把一個js對象格式化為json字元串，沒有參數。這東西有什麼用呢，我一般也不會在頁面上輸出一個json串啊，官網說它 可以用來進行調試，嗯，是個不錯的選擇。或者，也可以用在js中使用，作用就和我們熟悉的JSON.stringify()一樣。用法超級簡單：

1 {{ jsonTest | json}}      

三、angular自定義過濾器

方法：

1 app.filter('name', function() {
2 
3         return function(input, char) {
4 
5              return  自定義你的過濾器
6 
7       }
8 
9 }      

1 app.filter('capitalize', function() {
 2 
 3       //input 需要過濾的元素
 4 
 5       //char位置，索引減一
 6 
 7        return function(input, char) {
 8 
 9        　　if(isNaN(input)) {
10 
11                   //如果序号位置沒有設定，索引位置預設是0
12 
13                    var char = char - 1 || 0;
14 
15                    //把過濾元素索引位置上的字母轉換成大寫
16 
17                    var letter = input.charAt(char).toUpperCase();
18 
19                    var out = [];
20 
21                    for(var i = 0; i < input.length; i++) {
22 
23                       if(i == char) {
24 
25                            out.push(letter);
26 
27                       } else {
28 
29                               out.push(input[i]);
30 
31                         }
32 
33                    }
34 
35                         return out.join('');
36 
37                       } else {
38 
39                            return input;
40 
41                         }
42 
43                   }
44 
45 });