@H_502_3@在HTML中的模板绑定符号 {{ }} 内通过 | 符号来调用过滤器。将字符串@H_502_3@转换成大写:@H_502_3@{{ name | uppercase }}@H_502_3@
内置过滤器:@H_502_3@
1. currency@H_502_3@
@H_502_3@@H_502_3@
2. date@H_502_3@
@H_502_3@@H_502_3@
<span style="font-size:18px;">{{ 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 --></span>
年份格式化@H_502_3@
<span style="font-size:18px;">四位年份:{{ today | date:'yyyy' }} <!-- 2013 --> 两位年份:{{ today | date:'yy' }} <!-- 13 --> 一位年份:{{ today | date:'y' }} <!-- 2013 --></span>
月份格式化@H_502_3@
<span style="font-size:18px;">英文月份:{{ today | date:'MMMM' }} <!-- August --> 英文月份简写:{{ today | date:'MMM' }} <!-- Aug --> 数字月份:{{ today |date:'MM' }} <!-- 08 --> 一年中的第几个月份:{{ today |date:'M' }} <!-- 8 --></span>
日期格式化@H_502_3@
<span style="font-size:18px;">数字日期:{{ today|date:'dd' }} <!-- 09 --> 一个月中的第几天:{{ today | date:'d' }} <!-- 9 --> 英文星期:{{ today | date:'EEEE' }} <!-- Thursday --> 英文星期简写:{{ today | date:'EEE' }} <!-- Thu --></span>
小时格式化@H_502_3@
<span style="font-size:18px;">24小时制数字小时:{{today|date:'HH'}} <!--00--> 一天中的第几个小时:{{today|date:'H'}} <!--0--> 12小时制数字小时:{{today|date:'hh'}} <!--12--> 上午或下午的第几个小时:{{today|date:'h'}} <!--12--></span>
分钟格式化@H_502_3@
<span style="font-size:18px;">数字分钟数:{{ today | date:'mm' }} <!-- 09 --> 一个小时中的第几分钟:{{ today | date:'m' }} <!-- 9 --></span>
秒数格式化@H_502_3@
<span style="font-size:18px;">数字秒数:{{ today | date:'ss' }} <!-- 02 --> 一分钟内的第几秒:{{ today | date:'s' }} <!-- 2 --> 毫秒数:{{ today | date:'.sss' }} <!-- .995 --></span>
字符格式化@H_502_3@
<span style="font-size:18px;">上下午标识:{{ today | date:'a' }} <!-- AM --> 四位时区标识:{{ today | date:'Z' }} <!--- 0700 --></span>
<span style="font-size:18px;">{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }} <!-- ["Lerner","Likes","Eat"] --> {{ [{ 'name': 'Ari','City': 'San Francisco','favorite food': 'Pizza' },{ 'name': 'Nate','favorite food': 'indian food' }] | filter:{'favorite food': 'Pizza'} }} <!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] --></span>
@H_502_3@
4. json
@H_502_3@
@H_502_3@
json 过滤器可以将一个JSON或JavaScript对象转换成字符串。这种转换对调试非常有帮助:
@H_502_3@
@H_502_3@
@H_502_3@@H_502_3@
@H_502_3@
<span style="font-size:18px;">{{ {'name': 'Ari','City': 'SanFrancisco'} | json }} <!-- { "name": "Ari","City": "San Francisco" } --></span>
@H_502_3@
5. limitTo
@H_502_3@
@H_502_3@
@H_502_3@@H_502_3@
<span style="font-size:18px;">{{ San Francisco is very cloudy | limitTo:3 }} <!-- San --></span>
或最后的六个字符:@H_502_3@
<span style="font-size:18px;">{{ San Francisco is very cloudy | limitTo:-6 }} <!-- cloudy --></span>
<span style="font-size:18px;"> </span>
@H_502_3@@H_502_3@
@H_502_3@
6. lowercase@H_502_3@
lowercase 过滤器将字符串转为小写。@H_502_3@
<span style="font-size:18px;">{{ "San Francisco is very cloudy" | lowercase }} <!-- san francisco is very cloudy --> </span>
@H_502_3@
@H_502_3@@H_502_3@
7. number@H_502_3@
如果传入了一个非数字字符,会返会空字符串。@H_502_3@
<span style="font-size:18px;">{{ 123456789 | number }} <!-- 1,234,567,890 --></span>
我们将下面的对象数组用 name 字段进行排序:
@H_502_3@
@H_502_3@
@H_502_3@@H_502_3@
@H_502_3@
<span style="font-size:18px;">{{ [{ 'name': 'Ari','status': 'awake' },{ 'name': 'Q','status': 'sleeping' },'status': 'awake' }] | orderBy:'name' }} <!-- [ {"name":"Ari","status":"awake"},{"name":"Nate",{"name":"Q","status":"sleeping"} ] --></span>
@H_502_3@
@H_502_3@@H_502_3@
9. uppercase@H_502_3@
uppercase 过滤器可以将字符串转换为大写形式:@H_502_3@
<span style="font-size:18px;">{{ "San Francisco is very cloudy" | uppercase }} <!-- SAN FRANCISCO IS VERY CLOUDY --></span>
自定义过滤器@H_502_3@
例如:@H_502_3@
<span style="font-size:18px;">angular.module('myApp.filters',[]) .filter('capitalize',function() { return function(input) { // input是我们传入的字符串 if (input) { return input[0].toUpperCase() + input.slice(1); } }); </span>
@H_502_3@