什么是過(guò)濾器
過(guò)濾器可以用來(lái)格式化需要展示的數(shù)據(jù)。AngularJS 有很多內(nèi)置過(guò)濾器歹苦，同時(shí)也可以自己創(chuàng)建過(guò)濾器。
如何使用過(guò)濾器
- 在
HTML模板綁定符號(hào){{}}中通過(guò)|來(lái)調(diào)用過(guò)濾器督怜，若需要傳遞參數(shù)殴瘦，過(guò)濾器名字后面以:分隔；
例：
{{ time | date }}
{{ time | date : 'yyy-MM-dd' }} - 在
js代碼中通過(guò)$filter調(diào)用号杠。
例：
angular.module('myApp', [])
.controller('MyCtrl', ['$scope', '$filter', function ($scope, $filter) {
$scope.time = $filter('date')(1249448523423)
}]);
內(nèi)置過(guò)濾器
currency：
currency可以將數(shù)值格式化成貨幣格式（currency允許自定義設(shè)置貨幣符號(hào)蚪腋，默認(rèn)采用客戶端所在區(qū)域貨幣符號(hào)）。-
date：
date可以將日期格式化成需要的格式（默認(rèn)采用mediumDate格式）姨蟋。
(1). AngularJS內(nèi)置的支持本地化的日期格式：-
{{ time | date : 'medium' }}=> Aug 5, 2009 1:02:03 PM -
{{ time | date : 'short' }}=> 8/5/09 1:02 PM -
{{ time | date : 'fullDate' }}=> Wednesday, August 5, 2009 -
{{ time | date : 'longDate' }}=> August 5, 2009 -
{{ time | date : 'mediumDate' }}=> Aug 5, 2009 -
{{ time | date : 'shortDate' }}=> 8/5/09 -
{{ time | date : 'mediumTime' }}=> 1:02:03 PM -
{{ time | date : 'shortTime' }}=> 1:02 PM
(2). 年份格式化
- 四位：
{{ time | date : 'yyyy' }}=> 2009 - 兩位：
{{ time | date : 'yy' }}=> 09 - 一位：
{{ time | date : 'y' }}=> 2009
(3). 月份格式化
- 英文：
{{ time | date : 'MMMM' }}=> August - 英文簡(jiǎn)寫(xiě)：
{{ time | date : 'MMM' }}=> Aug - 數(shù)字：
{{ time | date : 'MM' }}=> 08 - 一年中第幾月：
{{ time | date : 'M' }}=> 8
(4). 日期格式化
- 英文星期：
{{ time | date : 'EEEE' }}=> Wednesday - 英文星期簡(jiǎn)寫(xiě)：
{{ time | date : 'EEE' }}=> Wed - 數(shù)字日期：
{{ time | date : 'dd' }}=> 05 - 一月中第幾天：
{{ time | date : 'd' }}=> 5
(5). 小時(shí)格式化
- 24時(shí)：
{{ time | date : 'HH' }}=> 13 - 一天中第幾個(gè)小時(shí)：
{{ time | date : 'H' }}=> 13 - 12時(shí)：
{{ time | date : 'hh' }}=> 01 - 上午或下午第幾小時(shí)：
{{ time | date : 'h' }}=> 1
(6). 分鐘格式化
- 數(shù)字：
{{ time | date : 'mm' }}=> 02 - 一小時(shí)中第幾分鐘：
{{ time | date : 'm' }}=> 2
(7). 秒數(shù)格式化
- 數(shù)字：
{{ time | date : 'ss' }}=> 03 - 一分鐘中第幾秒：
{{ time | date : 's' }}=> 3 - 毫秒：
{{ time | date : 'sss' }}=> 423
(8). 字符格式化
- 上下午標(biāo)識(shí)：
{{ time | date : 'a' }}=> PM - 四位時(shí)區(qū)標(biāo)識(shí)：
{{ time | date : 'Z' }}=> +0800
(9). 自定義
-
{{ time | date : 'MMMd, y' }}=> Aug5, 2009 -
{{ time | date : 'EEEE, d, M' }}=> Wednesday, 5, 8 -
{{ time | date : 'hh:mm:ss.sss' }}=> 01:02:03.423
-
-
filter：
filter可以從給定的數(shù)組中選擇一個(gè)子集屉凯，并將其生成一個(gè)新數(shù)組返回。
(1). 第一個(gè)參數(shù)可以為字符串眼溶、對(duì)象或函數(shù)：- 字符串：返回包含這個(gè)字符串的元素神得；
- !字符串：返回不包含這個(gè)字符串的元素；
- 對(duì)象：將帶過(guò)濾對(duì)象的屬性同該對(duì)象的同名屬性比較偷仿，若屬性值包含則返回（若想全部屬性對(duì)比哩簿，可以用
$作為鍵名）； - 函數(shù)：對(duì)每個(gè)元素執(zhí)行該函數(shù)酝静，若為真則返回节榜。
json：
json可以將 JSON 或 JavaScript 對(duì)象轉(zhuǎn)換成字符串。limitTo：
limitTo會(huì)根據(jù)傳入的參數(shù)生成一個(gè)新的數(shù)字或字符串别智，長(zhǎng)度取決于參數(shù)宗苍，參數(shù)正負(fù)決定從前截取還是從后截取（如果參數(shù)大于被操作數(shù)組或字符串長(zhǎng)度，那么會(huì)全部返回）讳窟。lowercase：
lowercase將字符串轉(zhuǎn)為小寫(xiě)让歼。number：
number將數(shù)字格式化成文本，參數(shù)可選丽啡，用來(lái)控制小數(shù)點(diǎn)后位數(shù)（若傳入一個(gè)非數(shù)字字符谋右，則返回空字符串）。
例：{{ 1249448523423.2134 | number : 2 }}=> 1,249,448,523,423.21orderBy：
orderBy可以用表達(dá)式對(duì)指定數(shù)組進(jìn)行排序补箍。
orderBy接受兩個(gè)參數(shù)：第一個(gè)參數(shù)是用來(lái)確定數(shù)組排序方向謂詞（必填）改执；第二個(gè)參數(shù)用來(lái)控制排序方向是否逆向（選填）。
{{ [{
name: 'a',
age: 21
}, {
name: 'c',
age: 18
}, {
name: 'b',
age: 24
}] | orderBy : 'name' }}
=> [{"name":"a","age":21},{"name":"b","age":24},{"name":"c","age":18}]
-
uppercase：
uppercase將字符串轉(zhuǎn)為大寫(xiě)坑雅。
自定義過(guò)濾器
創(chuàng)建一個(gè)自定義過(guò)濾器需要將其放到自己的模塊中辈挂。
<div ng-app='myApp'>
<ul>
<li ng-repeat="val in [1, 2, 3]">{{val | typeChange}}</li>
</ul>
</div>
<script>
angular.module('myApp', [])
.filter('typeChange', function () {
var typeList = {
1: '未開(kāi)始',
2: '進(jìn)行中',
3: '已結(jié)束',
}
return function (input) {
if (input) {
return typeList[input];
}
}
});
</script>
