uppercase|lowercase:大小写转换过滤
json:json格式过滤
date:日期格式过滤
number:数字格式过滤
currency:货币格式过滤
filter:查找
limitTo：字符串对象截取
orderBy:对象排序
1、uppercase，lowercase 大小写转换
1.{{ "lower cap string" | uppercase }} // 结果：LOWER CAP STRING
{{ "TANK is GOOD" | lowercase }} // 结果：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位数字的年份(如AD 1 => 0001, AD 2010 => 2010)
'yy': 2位数字的年份，范围为(00-99)。(如AD 2001 => 01, AD 2010 => 10)
'y': 1位数字的年份，例如 (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': 小时, 范围为(00-23)
'H': 小时 (0-23)
'hh': am/pm形式的小时, 范围为(01-12)
'h': am/pm形式的小时, (1-12)
'mm': 分钟,范围为 (00-59)
'm': 分钟 (0-59)
'ss': 秒, 范围为 (00-59)
's': 秒 (0-59)
'.sss' or ',sss': 毫秒,范围为 (000-999)
'a': am/pm 标记
'Z': 4 位数字的时区偏移(+符号)(-1200-+1200)
'ww': ISO-8601 年内的周数 (00-53)
'w': ISO-8601 年内的周数 (0-53)
AngularJS: API: ng/filter/date
body, td {
font-family: Tahoma;
font-size: 10pt;
}
format字符串也可以是以下预定义的本地化格式之一:
'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'")
如果要输出单引号，使序列中使用两个单引号(如："h 'o''clock'")。
3 数字格式过滤
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 }} // 结果：$250.00
{{ 250 | currency:"RMB ￥ " }} // 结果：RMB ￥ 250.00
5.json格式过滤
1.{{ json_expression | json}}
2.$filter('json')(Object)
这个过滤器常用于调试。使用双花括号的绑定会自动转换成JSON。
6.limitTo：字符串对象截取
1.{{ limitTo_expression | limitTo : limit}}
2.$filter('limitTo')(input, limit)
返回的数组或字符串的长度。如果limit数字为正数，从源数组/字符串开始的limit数量的条目会被复制。如果数字为负数，从源数组/字符串结尾的limit 数量的条目会被复制。如果limit超过array.length会被裁剪。长度为limit的新子数组或子串，如果输入数组小于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 。 字符串按字母顺序排序，数字按大小排序。注意：如果你发现数字没被正确排序，请确认它们保存的是数字而不是字符串。
1.{{ orderBy_expression | orderBy : expression : reverse}}
2.$filter('orderBy')(array, expression, reverse)
Array 用于排序的数组。
expression :可为下列之一：
function(*)
Function: Getter函数。这个函数的结果可使用<,=,>操作符进行排序。
string: 一个Angular表达式，对一个对象求值来排序，如用'name'来对属性名为'name'序。用可选前缀+或-来确定是正序或倒序 (例如，+name or -name)。
Array.<(function()|string)> 一个函数或字符串声明数组。数组中的第一个声明用于排序，但是当两个条目相等时，会用下一个声明。
reverse(可选)boolean对数组进行反向排序。
<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中选择一个条目子集，并作为一个新数组返回。
1.{{ filter_expression | filter : expression : comparator}}
2.$filter('filter')(array, expression, comparator)
array 源数组。
expression
string:作为表达式计算的字符串，计算结果作为子串匹配array中的内容。array中包含这个字符串的所有字符串或字符串属性对象会返回。字符串前可以放置!表示相反条件。
Object:一个模式对象，用于过滤array中对象的指定属性。例如{name:"M", phone:"1"} 表示返回数据组中属性name 包含 "M" 和属性 phone 包含 "1"的条目。可以使用特殊属性名 $ (as in {$:"text"}) 来匹配对象中的所有属性。这相当于上面描述的使用string进行的子串简单匹配。
function() Function(value): 一个自定义过滤方法的函数。这个函数被每个array中的元素调用。最终结果为返回true的元素的数组。
comparator
用于检测期望值(来自过滤表达式)和实际值(来自数组中的实际对象)是否匹配的比较器。可以为以下之一：
Function(actual, expected): 这个函数会传入对象值和期望值来比较，如果条目返回true就会被包含在过滤结果中。
true: Function(actual, expected) { return angular.equals(expected, actual)}的便捷写法。它对期望值和实际值进行强比较。
false|undefined: 一个不区分大小写的子串匹配函数的便捷写法。
<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>
