前言
Filter作用
- 在表达式中过滤变量的值，包括数组、字符串等
- 格式化
Filter使用方法
在表达式中应用Filters （过滤器），需要遵循格式如下：
{{ expression | filter }} 即 {{ 表达式 | 过滤器 }}
在输出结果中应用Filters
其实就是Filter的叠加--前一filter的输出结果作为后一filter的输入数据源，需要遵循格式如下：
{{ expression | filter1 | filter2 | ...}} 即 表达式(expression)使用filter1过滤后再使用filter2过滤...
带参数的Filter
Filter后面可以跟一个或多个参数，用来帮助实现特殊要求、需求的filter，需要遵循格式如下：
{{ expression | filter:argument1:argument2:... }}
自带的Filter
AngularJS为我们提供了9个内建的过滤器,分别是：
- currency
- Date
- filter
- json
- limitTo
- uppercase
- lowercase
- number
- orderBy
1、currency货币格式化
{{12.21 | currency}} //结果：$12.21
{{12.21 | currency:"￥"}} //结果：￥12.21
2、Date日期格式化
一. 本地日期格式化
1. {{ today | date:'medium' }} //结果： May 20,2016 10:36:52 PM
2. {{ today | date:'short' }} //结果： 5/20/16 10:36 PM
3. {{ today | date:'fullDate' }} //结果： Friday,May 20,2016
4. {{ today | date:'longDate' }} //结果： May 20,2016
5. {{ today | date:'mediumDate' }} //结果： May 20,2016
6. {{ today | date:'shortDate' }} //结果： 5/20/16
7. {{ today | date:'mediumTime' }} //结果： 10:36:52 PM
8. {{ today | date:'shortTime' }} //结果： 10:36 PM
二. 年月日时分秒毫秒
{{today | date:'yyyy-MM-dd HH:mm:ss:sss EEEE'}} //结果：2016-05-20 22:43:52:592 Friday
1. 年份格式
'yyyy'/'yy'/'y' 返回的是：2016/16/2016 (四位年份/两位年份/一位年份)
2. 月份格式
'MMMM'/'MMM'/'MM'/'M' 返回的是：May/May/05/5 (英文月份/英文月份简写/两位数月份/一年中的第几个月)
3. 日格式
'dd'/'d'/'EEEE'/'EEE' 返回的是：20/20/Friday/Fri (数字日期/一个月的第几天/英文星期/英文星期简写)
4. 小时格式
'HH'/'H'/'hh'/'h' 返回的是：22/22/10/10 (24小时制/24小时制第几小时/12小时制/12小时制第几小时)
5. 分钟格式
'mm'/'m' 返回的是：43/43 (数字分钟数/一个小时中的第几分钟)
6.秒格式
'ss'/'s' 返回的是：52/52 (数字秒数/一分钟中的第几秒)
7. 毫秒数格：
'sss' 返回的是：592 (毫秒数)
8. 字符格式
上下午标识：{{ today | date:'a' }} 返回的是：PM
四位时区标识：{{ today | date:'Z' }} 返回的是：+0800
3、filter查找
{{ [{"age": 38,"id": 24,"name": "Kobe Bryant"},{"age": 38,"id": 21,"name": "Tim Duncan"},{"age": 37,"id": 1,"name": "Tracy McGrady"}
] | filter:'n'}} //查找含有有s的行
//结果：[{"age":38,"id":24,"name":"Kobe Bryant"},{"age":38,"id":21,"name":"Tim Duncan"}]
{{ [{"age": 38,"name": "Tracy McGrady"}
] | filter:{'name':'Kobe'} }} //查找name含有Kobe的行
//结果:[{"age":38,"name":"Kobe Bryant"}]
4、json格式化
{{ {"age": 38,id: "24",name: "Kobe Bryant"} |json }}
结果：{ "age": 38,"id": "24","name": "Kobe Bryant" }
5、limitTo字符串对象的截取
{{"i love Tracy McGrady" | limitTo:6}}
{{"i love Tracy McGrady" | limitTo:-7}}
返回的结果分别是：
i love
McGrady
{{ [{"age": 38,"name": "Tracy McGrady"}
] | limitTo:1 }}
结果：
[{"age":38,"name":"Kobe Bryant"}]
6、uppercase大写转换
{{"i love Tracy McGrady" | uppercase}}
结果：
I LOVE TRACY MCGRADY
7、lowercase小写转换
{{"i love Tracy McGrady" | lowercase}}
结果：
i love tracy mcgrady
8、number格式化
{{3.1415926 | number:2}}
{{5201314 | number}}
结果：
3.14
5,201,314
9、orderBy排序
{{ [{"age": 38,"name": "Tracy McGrady"}
] | orderBy: 'id': true }} //根据id降序排列
{{ [{"age": 38,"name": "Tracy McGrady"}
] | orderBy: 'id' }} //根据id升序排列
自定义Filter
格式大致如下：
app.filter('filter(过滤器)名称',function(){
return function(需要过滤的对象,过滤器参数1,过滤器参数2,...){
//...执行业务逻辑代码
return 处理后的对象;
}
}); 内部返回的方法包含了多个参数，一个是输入的值，就是我们过滤器接受的值。后面的是过滤器参数，可以有多个。
例如：
<!DOCTYPE html> <html ng-app="exampleApp"> <head> <Meta charset="utf-8"> <title>AngularJS Demo</title> <link href="bootstrap.css" rel="stylesheet" /> <link href="bootstrap-theme.css" rel="stylesheet" /> <script src="angular.js"></script> <script> var myApp = angular.module("exampleApp",[]); myApp.controller("dayCtrl",function ($scope) { $scope.day = new Date().getDay(); }); myApp.filter("dayName",function () { var dayNames = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; return function (input) { return angular.isNumber(input) ? dayNames[input] : input; }; }); </script> </head> <body> <div class="panel"> <div class="page-header"> <h3>AngularJS App</h3> </div> <h4 ng-controller="dayCtrl"> Today is {{day | dayName}} </h4> </div> </body> </html>结果：