AngularJS -- 過濾器

過濾器

過略器用來格式化需要展示給用戶的數據。AngularJS有很多實用的內置過濾器，
同時也提供了方便的途徑可以自己創建過濾器。

在HTML總的模板綁定符號{{ }} 內通過|符號來調用過濾器。例如，假設我們
希望將字符串轉換成大寫，可以將字符串中的每個字符都單獨進行轉換操作，也
可以使用過濾器：

{{ name | uppercase }}

在JavaScript代碼中可以通過$filter來調用過濾器。例如，在JavaScript代碼中使用
lowercase過濾器：

app.controller('DemoController', ['$scope', '$filter',
    function($scope, $filter) {
    $scope.name = $filter('lowercase')('Ari');
}]);

以HTML的形式使用過濾器時，如果需要傳遞參數給過濾器，只要在過濾器名字后面加冒號
即可。如果有多個參數，可以在每個參數后面都加入冒號。例如，數值過濾器可以限制小數點后
的位數，在過濾器后寫上:2可以將2作為參數傳給過濾器：

{{ 123.456789 | number:2 }}
可以用|符號作為分割符來同時使用多個過濾器

currency

currency過濾器可以將一個數值格式化為貨幣格式。
用{{ 123 | currency }} 來將123轉化成貨幣格式。

currency過濾器允許我們自己設置貨幣符號，默認情況下會采用客戶端所處區域的貨幣符號。

date

date過濾器可以將日期格式化吃成需要的格式

• 內置的支持本地化的日期格式：

{{ today | date:'medium' }}    <!-- Aug 09, 2013 12:09:02 PM --> 
{{ today | date:'short' }}     <!-- 8/9/1312:09PM -->
{{ today | date:'fullDate' }}  <!-- Thursday, August 09, 2013 -->
{{ today | date:'longDate' }}  <!-- August 09, 2013 -->
{{ today | date:'mediumDate' }}<!-- Aug 09, 2013 -->
{{ today | date:'shortDate' }} <!-- 8/9/13 -->
{{ today | date:'mediumTime' }}<!-- 12:09:02 PM -->
{{ today | date:'shortTime' }} <!-- 12:09 PM -->

• 年份格式化

四位年份：{{ today | date:'yyyy' }} <!-- 2013 --> 
兩位年份：{{ today | date:'yy' }} <!-- 13 --> 
一位年份：{{ today | date:'y' }} <!-- 2013 --> 

• 月份格式化

英文月份：{{ today | date:'MMMM' }} <!-- August --> 
英文月份簡寫：{{ today | date:'MMM' }} <!-- Aug --> 
數字月份：{{ today |date:'MM' }} <!-- 08 --> 
一年中的第幾個月份：{{ today |date:'M' }} <!-- 8 --> 

• 日期格式化

數字日期：{{ today|date:'dd' }} <!-- 09 --> 
一個月中的第幾天：{{ today | date:'d' }} <!-- 9 --> 
英文星期：{{ today | date:'EEEE' }} <!-- Thursday --> 
英文星期簡寫：{{ today | date:'EEE' }} <!-- Thu --> 

• 小時格式化

24小時制數字小時：{{today|date:'HH'}} <!--00--> 
一天中的第幾個小時：{{today|date:'H'}} <!--0--> 
12小時制數字小時：{{today|date:'hh'}} <!--12--> 
上午或下午的第幾個小時：{{today|date:'h'}} <!--12--> 

• 分鍾格式化

數字分鍾數：{{ today | date:'mm' }} <!-- 09 --> 
一個小時中的第幾分鍾：{{ today | date:'m' }} <!-- 9 --> 

• 秒數格式化

數字秒數：{{ today | date:'ss' }} <!-- 02 --> 
一分鍾內的第幾秒：{{ today | date:'s' }} <!-- 2 --> 
毫秒數：{{ today | date:'.sss' }} <!-- .995 --> 

• 字符格式化

上下午標識：{{ today | date:'a' }} <!-- AM --> 
四位時區標識：{{ today | date:'Z' }} <!--- 0700 --> 

• 下面是一些自定義日期格式的示例：

{{ today | date:'MMMd, y' }} <!-- Aug9, 2013 --> 
{{ today | date:'EEEE, d, M' }} <!-- Thursday, 9, 8--> 
{{ today | date:'hh:mm:ss.sss' }} <!-- 12:09:02.995 --> 

字符串

返回所有包含這個字符串的元素。如果我們想返回不包含該字符串的元素，在參數前加
!符號。

對象

AngularJS會將待過濾對象的屬性同這個對象中的同名屬性進行比較，如果屬性值是字符串
就會判斷是否包含該字符串。如果我們希望對全部屬性都進行對比，可以將
$當作鍵名。

函數

對每個元素都執行這個函數，返回非假值的元素會出現在新的數組中並返回。例如，用下面的過濾器可以選擇所有包含字母
e的單詞：
{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }}

如果要過濾對象，可以使用上面提到的對象過濾器。例如，如果有一個由
people對象組成的數組，每個對象都含有他們最喜歡吃的食物的列表，那么可以用下面的形式進行過濾：

{{ [{ 
    'name': 'Ari', 
    'City': 'San Francisco', 
    'favorite food': 'Pizza' 
    },{ 
    'name': 'Nate', 
    'City': 'San Francisco', 
    'favorite food': 'indian food' 
    }] | filter:{'favorite food': 'Pizza'} }} 
<!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] -->

isCapitalized函數的功能是根據首字母是否為大寫返回true或false

//HTML

<div id="emailEditor" ng-controller="MyController">
    {{ ['Ari','likes','to','travel'] | filter:isCapitalized }}
</div>

JAVASCRIPT

angular.module('myApp', [])
.controller('MyController', ['$scope', '$filter', 
  function($scope, $filter) { 
    $scope.isCapitalized = function(str) { 
	    return str[0] == str[0].toUpperCase(); 
	}; 
}]); 

我們也可以給filter過濾器傳入第二個參數，用來指定預期值同實際值進行比較的方式。
第二個參數可以是以下三種情況之一。

• true 用angular.equals(expected, actual)對兩個值進行嚴格比較。

• false 進行區分大小寫的子字符串比較。

• 函數運行這個函數，如果返回真值就接受這個元素。

json過濾器可以將一個JSON或javaScript對象轉換成字符串。這種轉換對調試非常有幫助：
{{ {'name': 'Ari', 'City': 'SanFrancisco'} | json }}

{
 "name": "Ari",
 "City": "San Francisco"
}

limitTo過濾器會根據傳入的參數生成一個新的數組或字符串，新的數組或字符串的長度
取決於傳入的參數，通過傳入參數的正負數來控制從前面還是后面開始截取。

如果傳入的長度值大於被操作數組或字符串的長度，那么整個數組或字符串都會被返回。

{{ San Francisco is very cloudy | limitTo:3 }}
{{ San Francisco is very cloudy | limitTo:-6 }}
{{['a', 'b', 'c', 'd'] | limitTo:1 }}

lowercase過濾器將字符串轉為小寫。
{{ "San Francisco is very cloudy" | lowercase }}

number過濾器將數字格式化成文本。它的第二個參數是可選的，用來控制小數點后截取的位數。

如果傳入了一個非數字字符，會返會空字符串。

{{ 123456789 | number }}
{{ 1.234567 | number:2 }}

orderBy過濾器可以用表達式對指定的數組進行排序。
orderBy可以接受兩個參數，第一個是必需的，第二個是可選的。
第一個參數是用來確定數組排序方向的謂詞。

當第一個參數是函數時，該函數會被當作待排序對象的getter方法。

對這個字符串進行解析的結果將決定數組元素的排序方向。我們可以傳入
+或-來強制進行升序或降序排列。

在排序表達式中使用數組元素作為謂詞。對於與表達式結果並
不嚴格相等的每個元素，則使用第一個謂詞。

第二個參數用來控制排序的方向（是否逆向）。

{{ [{ 
    'name': 'Ari', 
    'status': 'awake' 
    },{ 
    'name': 'Q', 
    'status': 'sleeping' 
    },{ 
    'name': 'Nate', 
    'status': 'awake' 
    }] | orderBy:'name' }} 
<!--
  [
  {"name":"Ari","status":"awake"},
  {"name":"Nate","status":"awake"},
  {"name":"Q","status":"sleeping"}
  ]
-->

也可以對排序結果進行反轉。例如，通過將第二個參數設置為
true可以將排序結果進行反轉：

{{ [{ 
    'name': 'Ari', 
    'status': 'awake' 
    },{ 
    'name': 'Q', 
    'status': 'sleeping' 
    },{ 
    'name': 'Nate', 
        'status': 'awake' 
    }] | orderBy:'name':true }} 
<!--
  [
  {"name":"Q","status":"sleeping"}, 
  {"name":"Nate","status":"awake"}, 
  {"name":"Ari","status":"awake"}
  ]
-->

uppercase過濾器可以將字符串轉換為大寫形式：

{{ "San Francisco is very cloudy" | uppercase }}

自定義過濾器

創建一個過濾器非常容易，創建自定義過濾器需要將它放到自己的模塊中。
如：將字符串第一個字母轉換為大寫：

HTML

{{ 'abcddefg' | capitalize }}

首先，創建一個模塊用以在應用中進行引用（這是一個非常好的實踐）：

JAVASCRIPT

angular.module('myApp', [])
.controller('MyController', ['$scope', '$filter', 
  function($scope, $filter) { 
    //nothing
}])
.filter('capitalize', function() {
   return function(input) {
   	//input是傳入的字符串
   	if (input) {
   		return input[0].toUpperCase() + input.slice(1);
   	}
   };
});