uppercase|lowercase:大小寫轉(zhuǎn)換過濾
json:json格式過濾
date:日期格式過濾
number:數(shù)字格式過濾
currency:貨幣格式過濾
filter:查找
limitTo：字符串對象截取
orderBy:對象排序
1讳嘱、uppercase，lowercase 大小寫轉(zhuǎn)換
1.{{ "lower cap string" | uppercase }} // 結(jié)果：LOWER CAP STRING
{{ "TANK is GOOD" | lowercase }} // 結(jié)果：tank is good
2.$filter('uppercase')()
2若债、date 格式化
1.{{ date_expression | date : format(可選)}}
2.$filter('date')(date, format)
format值
{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25
'yyyy': 4位數(shù)字的年份(如AD 1 => 0001, AD 2010 => 2010)
'yy': 2位數(shù)字的年份酷含，范圍為(00-99)。(如AD 2001 => 01, AD 2010 => 10)
'y': 1位數(shù)字的年份钻洒，例如 (AD 1 => 1, AD 199 => 199)
'MMMM': 月份 (January-December)
'MMM': 月份 (Jan-Dec)
'MM': 月份, padded (01-12)
'M': 月份 (1-12)
'dd': 日掖蛤，范圍為(01-31)
'd': 日 (1-31)
'EEEE': 星期,(Sunday-Saturday)
'EEE': 星期, (Sun-Sat)
'HH': 小時(shí), 范圍為(00-23)
'H': 小時(shí) (0-23)
'hh': am/pm形式的小時(shí), 范圍為(01-12)
'h': am/pm形式的小時(shí), (1-12)
'mm': 分鐘,范圍為 (00-59)
'm': 分鐘 (0-59)
'ss': 秒, 范圍為 (00-59)
's': 秒 (0-59)
'.sss' or ',sss': 毫秒,范圍為 (000-999)
'a': am/pm 標(biāo)記
'Z': 4 位數(shù)字的時(shí)區(qū)偏移(+符號)(-1200-+1200)
'ww': ISO-8601 年內(nèi)的周數(shù) (00-53)
'w': ISO-8601 年內(nèi)的周數(shù) (0-53)
AngularJS: API: ng/filter/date
body, td {
font-family: Tahoma;
font-size: 10pt;
}
format字符串也可以是以下預(yù)定義的本地化格式之一:
'medium': 等于en_US本地化后的'MMM d, y h:mm:ss a'(如：Sep 3, 2010 12:05:08 pm)
'short': 等于en_US本地化后的'M/d/yy h:mm a'(如： 9/3/10 12:05 pm)
'fullDate': 等于en_US本地化后的'EEEE, MMMM d, y'(如： Friday, September 3, 2010)
'longDate': 等于en_US本地化后的'MMMM d, y'(如： September 3, 2010)
'mediumDate': 等于en_US本地化后的'MMM d, y'(如： Sep 3, 2010)
'shortDate': 等于en_US本地化后的'M/d/yy'(如： 9/3/10)
'mediumTime': 等于en_US本地化后的'h:mm:ss a'(如： 12:05:08 pm)
'shortTime': 等于en_US本地化后的'h:mm a'(如： 12:05 pm)
format字符串可以包含固定值。這需要用單引號括起來 (如："h 'in the morning'")
如果要輸出單引號崔泵，使序列中使用兩個(gè)單引號(如："h 'o''clock'")。
3 數(shù)字格式過濾
1.{{ number_expression | number : fractionSize}}
2.$filter('number')(number, fractionSize)
{{158620 | number}}//158,620
{{16.1945000 | number:2}} //16.19
4.currency貨幣格式化
1.{{ currency_expression | currency : symbol}}
2.$filter('currency')(amount, symbol)
{{ 250 | currency }} // 結(jié)果：$250.00
{{ 250 | currency:"RMB ￥ " }} // 結(jié)果：RMB ￥ 250.00
5.json格式過濾
1.{{ json_expression | json}}
2.$filter('json')(Object)
這個(gè)過濾器常用于調(diào)試猪瞬。使用雙花括號的綁定會自動轉(zhuǎn)換成JSON憎瘸。
6.limitTo：字符串對象截取
1.{{ limitTo_expression | limitTo : limit}}
2.$filter('limitTo')(input, limit)
返回的數(shù)組或字符串的長度。如果limit數(shù)字為正數(shù)陈瘦，從源數(shù)組/字符串開始的limit數(shù)量的條目會被復(fù)制幌甘。如果數(shù)字為負(fù)數(shù)，從源數(shù)組/字符串結(jié)尾的limit 數(shù)量的條目會被復(fù)制痊项。如果limit超過array.length會被裁剪锅风。長度為limit的新子數(shù)組或子串，如果輸入數(shù)組小于limit鞍泉，返回長度會小于limit皱埠。
<body ng-app="limitToExample">
<div ng-controller="ExampleController">
Limit {{numbers}} to: <input Type="integer" ng-model="numLimit">
<p>Output numbers: {{ numbers | limitTo:numLimit }}</p>
Limit {{letters}} to: <input Type="integer" ng-model="letterLimit">
<p>Output letters: {{ letters | limitTo:letterLimit }}</p></div>
<script>
angular.module('limitToExample', [])
.controller('ExampleController', ['$scope', function($scope)
{
$scope.numbers = [1,2,3,4,5,6,7,8,9];
$scope.letters = "abcdefghi";
$scope.numLimit = 3;
$scope.letterLimit = -3;
}]
);
</script>
</body>
6.orderBy:對象排序
通過expression來排序指定的array 。 字符串按字母順序排序咖驮，數(shù)字按大小排序边器。注意：如果你發(fā)現(xiàn)數(shù)字沒被正確排序，請確認(rèn)它們保存的是數(shù)字而不是字符串托修。
1.{{ orderBy_expression | orderBy : expression : reverse}}
2.$filter('orderBy')(array, expression, reverse)
Array 用于排序的數(shù)組忘巧。
expression :可為下列之一：
function(*)
Function: Getter函數(shù)。這個(gè)函數(shù)的結(jié)果可使用<,=,>操作符進(jìn)行排序诀黍。
string: 一個(gè)Angular表達(dá)式袋坑，對一個(gè)對象求值來排序，如用'name'來對屬性名為'name'序眯勾。用可選前綴+或-來確定是正序或倒序 (例如枣宫，+name or -name)。
Array.<(function()|string)> 一個(gè)函數(shù)或字符串聲明數(shù)組吃环。數(shù)組中的第一個(gè)聲明用于排序也颤，但是當(dāng)兩個(gè)條目相等時(shí)，會用下一個(gè)聲明郁轻。
reverse(可選)boolean對數(shù)組進(jìn)行反向排序翅娶。
<script> angular.module('orderByExample', [])
.controller('ExampleController', ['$scope', Function($scope) {
$scope.friends = [
{name:'John', phone:'555-1212', age:10},
{name:'Mary', phone:'555-9876', age:19},
{name:'Mike', phone:'555-4321', age:21},
{name:'Adam', phone:'555-5678', age:35},
{name:'Julie', phone:'555-8765', age:29}];
$scope.predicate = '-age'; }
]);
</script>
<div ng-controller="ExampleController">
<pre>Sorting predicate = {{predicate}}; reverse = {{reverse}}</pre> <hr/>
[ <a href="" ng-click="predicate=''">unsorted</a> ]
<table class="friend">
<tr><th><a href="" ng-click="predicate = 'name'; reverse=false">名稱</a>
(<a href="" ng-click="predicate = '-name'; reverse=false">^</a>)</th>
<th><a href="" ng-click="predicate = 'phone'; reverse=!reverse">Phone Number</a></th>
<th><a href="" ng-click="predicate = 'age'; reverse=!reverse">Age</a></th>
</tr><tr ng-repeat="friend in friends | orderBy:predicate:reverse">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td>{{friend.age}}</td>
</tr>
</table>
</div>
7.filter:查找
從array中選擇一個(gè)條目子集，并作為一個(gè)新數(shù)組返回好唯。
1.{{ filter_expression | filter : expression : comparator}}
2.$filter('filter')(array, expression, comparator)
array 源數(shù)組竭沫。
expression
string:作為表達(dá)式計(jì)算的字符串，計(jì)算結(jié)果作為子串匹配array中的內(nèi)容骑篙。array中包含這個(gè)字符串的所有字符串或字符串屬性對象會返回蜕提。字符串前可以放置!表示相反條件。
Object:一個(gè)模式對象靶端，用于過濾array中對象的指定屬性谎势。例如{name:"M", phone:"1"} 表示返回?cái)?shù)據(jù)組中屬性name 包含 "M" 和屬性 phone 包含 "1"的條目⊙蠲可以使用特殊屬性名 $ (as in {$:"text"}) 來匹配對象中的所有屬性脏榆。這相當(dāng)于上面描述的使用string進(jìn)行的子串簡單匹配。
function() Function(value): 一個(gè)自定義過濾方法的函數(shù)台谍。這個(gè)函數(shù)被每個(gè)array中的元素調(diào)用须喂。最終結(jié)果為返回true的元素的數(shù)組。
comparator
用于檢測期望值(來自過濾表達(dá)式)和實(shí)際值(來自數(shù)組中的實(shí)際對象)是否匹配的比較器趁蕊∧髡郏可以為以下之一：
Function(actual, expected): 這個(gè)函數(shù)會傳入對象值和期望值來比較，如果條目返回true就會被包含在過濾結(jié)果中介衔。
true: Function(actual, expected) { return angular.equals(expected, actual)}的便捷寫法恨胚。它對期望值和實(shí)際值進(jìn)行強(qiáng)比較。
false|undefined: 一個(gè)不區(qū)分大小寫的子串匹配函數(shù)的便捷寫法炎咖。
<div ng-init="friends = [{name:'John', phone:'555-1276'},
{name:'Mary', phone:'800-BIG-MARY'},
{name:'Mike', phone:'555-4321'},
{name:'Adam', phone:'555-5678'},
{name:'Julie', phone:'555-8765'},
{name:'Juliette', phone:'555-5678'}]"></div>
Search: <input ng-model="searchText"><table id="searchTextResults">
<tr>
<th>名稱</th>
<th>Phone</th>
</tr>
<tr ng-repeat="friend in friends | filter:searchText">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
</tr></table>
<hr>
Any: <input ng-model="search.$"> <br>
Name only <input ng-model="search.name"><br>
Phone only <input ng-model="search.phone"><br>
Equality <input Type="checkbox" ng-model="strict"><br>
<table id="searchObjResults">
<tr><th>名稱</th
><th>Phone</th></tr>
<tr ng-repeat="friendObj in friends | filter:search:strict">
<td>{{friendObj.name}}</td>
<td>{{friendObj.phone}}</td>
</tr>
</table>
