您的位置：首页 > Web前端 > AngularJS

AngularJS Filter过滤器详情

2016-05-20 22:08 344 查看

前言

这次系统学习了filter，特地整理了一下filter，因为它确实带来了很多便利。另外它包含自带的filter，也可以自定义。

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,"id": 24,"name": "Kobe Bryant"},
{"age": 38,"id": 21,"name": "Tim Duncan"},
{"age": 37,"id": 1,"name": "Tracy McGrady"}
] | filter:{'name':'Kobe'} }}   //查找name含有Kobe的行

//结果:[{"age":38,"id":24,"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,"id": 24,"name": "Kobe Bryant"},
{"age": 38,"id": 21,"name": "Tim Duncan"},
{"age": 37,"id": 1,"name": "Tracy McGrady"}
] | limitTo:1 }}
结果：
[{"age":38,"id":24,"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,"id": 24,"name": "Kobe Bryant"},
{"age": 38,"id": 21,"name": "Tim Duncan"},
{"age": 37,"id": 1,"name": "Tracy McGrady"}
] | orderBy: 'id': true }}   //根据id降序排列

{{ [{"age": 38,"id": 24,"name": "Kobe Bryant"},
{"age": 38,"id": 21,"name": "Tim Duncan"},
{"age": 37,"id": 1,"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>

结果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： angularjs filter 过滤器

相关文章推荐

新的分享

章节导航