內置的過濾器 · Angular半知半解

## 內置的過濾器 | 過濾器 | 說明 | | :----: | :----: | | currency | 格式化數字為貨幣格式 | | date | 格式化時間 | | filter | 從數組項中選擇一個子集 | | number | 將數字格式化為文本 | | json | 將JSON或JavaScript對象轉換為字符串 | | limitTo | 根據傳入的參數生成一個新的數組或字符串 | | lowercase | 將字符串轉換為小寫 | | uppercase | 將字符串轉換為大寫 | | orderBy | 排序 | **(1) currency** `currency`過濾器可以將一個數值格式化為貨幣格式。實例（5-1.html）： ``` {{ 123 | currency }} // $123.00 ``` 我們還可以自己設置貨幣符號，默認會采用客戶端所處區域的貨幣符號。 ``` {{ 123 | currency: '￥' }} // ￥123.00 ``` **(2) date** `date`過濾器可以將日期格式化成需要的格式。默認會采用`mediumDate`格式。實例（5-2.html）：定義一個時間屬性： ``` $scope.today = new Date(); ``` 本地化的日期格式： ``` {{ today | date: 'medium' }} // Feb 4, 2017 11:38:01 AM {{ today | date:'short' }} // 2/4/17 11:38 AM {{ today | date:'fullDate' }} // Saturday, February 4, 2017 {{ today | date:'longDate' }} // February 4, 2017 {{ today | date:'mediumDate' }} // Feb 4, 2017 {{ today | date:'shortDate' }} // 2/4/17 {{ today | date:'mediumTime' }} // 11:38:01 AM {{ today | date:'shortTime' }} // 11:38 AM ``` 年份格式化： ``` 四位年份：{{ today | date:'yyyy' }} // 2017 兩位年份：{{ today | date:'yy' }} // 17 一位年份：{{ today | date:'y' }} // 2017 ``` 月份格式化： ``` 英文月份：{{ today | date:'MMMM' }} // February 英文縮寫：{{ today | date:'MMM' }} // Feb 數字月份：{{ today | date:'MM' }} // 02 一年中的第幾個月份：{{ today | date:'M' }} // 2 ``` 日期格式化： ``` 數字日期：{{ today | date:'dd' }} // 04 一個月中的第幾天：{{ today | date:'d' }} // 4 英文星期：{{ today | date:'EEEE' }} // Saturday 英文縮寫：{{ today | date:'EEE' }} // Sat ``` 小時格式化： ``` 24小時制數字小時：{{ today | date:'HH' }} // 00 一天中的第幾個小時：{{ today | date:'H' }} // 0 12小時制數字小時：{{ today | date:'hh' }} // 12 上午或下午的第幾個小時：{{ today | date:'h' }} // 12 ``` 分鐘格式化： ``` 數字分鐘數：{{ today | date:'mm' }} // 40 一個小時中的第幾分鐘：{{ today | date:'m' }} // 40 ``` 秒數格式化： ``` 數字秒數：{{ today | date:'ss' }} // 41 一分鐘內的第幾秒：{{ today | date:'s' }} // 41 毫秒數：{{ today | date:'.sss' }} // .440 ``` 字符格式化： ``` 上下午標識：{{ today | date:'a' }} // AM 四位時區標識：{{ today | date:'Z' }} // +0800 ``` 自定義日期格式： ``` {{ today | date:'yyyy-MM-dd hh:mm:ss' }} ``` **(3) filter** `filter`過濾器可以從給定數組中選擇一個子集，并將其生成一個新數組返回。 `filter`過濾器的第一參數可以是字符串、對象或是一個用來從數組中選擇元素的函數。 **字符串** 返回所有包含這個字符串的元素。如果我們想返回不包含該字符串的元素，在參數前加`!`符號即可。實例（5-3.html）： ``` <div ng-controller="myController"> {{ person.name | filter: 'o' }} {{ person.name | filter: '!o' }} </div> <script> myApp.controller('myController', function($scope) { $scope.person = { name: ['Tom', 'Lin', 'Bao'] }; }); </script> // ["Tom","Bao"] // ["Lin"] ``` **對象** AngularJS會將待過濾對象的屬性同這個對象中的同名屬性進行比較。如果屬性值是字符串就會判斷是否包含該字符串。實例（5-4.html）： ``` <div ng-controller="myController"> {{ person.intro | filter: {'sex': 'girl'} }} </div> <script> myApp.controller('myController', function($scope) { $scope.person = { intro: [{ 'name': 'Tom', 'sex': 'boy' }, { 'name': 'Lin', 'sex': 'girl' }, { 'name': 'Bao', 'sex': 'boy' }] }; }); </script> // [{"name":"Lin","sex":"girl"}] ``` 在上面的例子中，我們使用一個對象作為過濾對象，匹配屬性"sex"，且值包含"girl"的元素。如果我們希望對全部屬性都進行比較，可以將`$`當作鍵名。實例（5-5.html）： ``` <div ng-controller="myController"> {{ person.intro | filter: {'$': 'o'} }} </div> <script> myApp.controller('myController', function($scope) { $scope.person = { intro: [{ 'name': 'Tom', 'sex': girl' }, { 'name': 'Lin', 'sex': 'girl' }, { 'name': 'Bao', 'sex': 'boy' }] }; }); </script> // [{"name":"Tom","sex":"girl"},{"name":"Bao","sex":"boy"}] ``` 在這里使用`$`符號來對數組的元素的所有屬性進行匹配，只要"name"或"sex"屬性的值包含字符串`o`，就返回。 **函數** 對每個元素都執行這個函數，返回由非假值組成的新數組。實例（5-6.html）： ``` <div ng-controller="myController"> {{ num | filter: isBigger }} </div> <script> myApp.controller('myController', function($scope) { $scope.num = [1, 5, 8]; $scope.isBigger = function(num) { return num > 4; }; }); </script> // [5, 8] ``` 在上面的示例中，只有當元素值大于4時，才會返回。注意：當filter使用自定義函數時，必須傳遞一個參數。 `filter`還可以傳入第二個參數，用來指定預期值同實際值進行比較的方式： - true：用angular.equals(expected, actual)對兩個值進行嚴格比較 - false：進行區分大小寫的子字符串比較 - 函數：運行這個函數，如果返回真值就接受這個元素實例（5-7.html）： ``` <div ng-controller="myController"> {{ ["Tom"] | filter: 't' }} </div> // ["Tome"] ``` 當你添加第二個參數時： ``` <div ng-controller="myController"> {{ ["Tom"] | filter: 't': true }} </div> // [] ``` 可見第一個例子是模糊匹配，而第二個例子中必須是全等才會匹配。 **(4) json** `json`過濾器可以將一個JSON或JavaScript對象轉換成字符串。實例（5-8.html）： ``` {{ {'name': 'angular'} | json }} // { "name": "angular" } ``` **(5) limitTo** `limitTo`過濾器會根據傳入的參數生成一個新的數組或字符串，新的數組或字符串的長度取決于傳入的參數，通過傳入的參數的正負值來控制從前面還是從后面開始截取。實例（5-9.html）： ``` <p>{{ 'angular' | limitTo: 2 }}</p> // an <p>{{ 'angular' | limitTo: -2 }}</p> // ar <p>{{ [1, 2] | limitTo: 1 }}</p> // [1] <p>{{ 'angular' | limitTo: 9 }}</p> // angular ``` 注意：如果傳入的長度值大于被操作數組或字符串的長度，那么整個數組或字符串都會被返回。 **(6) lowercase** `lowercase`過濾器將字符串轉為小寫。實例： ``` {{ 'Abc' | lowercase }} // abc ``` **(7) uppercase** `uppercase`過濾器用來將字符串轉換成大寫。實例: ``` {{ 'Abc' | uppercase }} // ABC ``` **(8) number** `number`過濾器將數字格式化為文本。它的第二個參數是可選的，用來控制小數點后截取的位數。實例： ``` {{ 12345678 | number }} {{ 123.123 | number: 2 }} // 12,345,678 // 123.12 ``` 注意：“number:0”表示除掉小數后的數值，保留整數部分。 **(9) orderBy** `orderBy`過濾器可以用表達式對指定的數組進行排序。可以接受兩個參數，第一個是必需的，第二個是可選的。第一個參數是用來確定數組排序方向： - 函數：當第一個參數是函數時，該函數會被當作待排序對象的getter方法 - 字符串：對這個字符串進行解析的結果將決定數組元素的排序方向。可以傳入`+`或`-`來強制進行升序或降序排列。 - 數組：第二個參數用來控制排序的方向（是否逆向）：true/false 實例（5-10.html）： ``` {{ [{'name': 'tom'}, {'name': 'jon'}, {'name': 'ao'}] | orderBy: 'name' }} // [{"name":"ao"},{"name":"jon"},{"name":"tom"}] ``` 還可以是反序： ``` {{ [{'name': 'tom'}, {'name': 'jon'}, {'name': 'ao'}] | orderBy: 'name': true }} // [{"name":"tom"},{"name":"jon"},{"name":"ao"}] ```