AngularJS Filter过滤器详情
发布时间：2020-12-17 10:09:18 所属栏目：安全 来源：网络整理
导读：前言 这次系统学习了filter，特地整理了一下filter，因为它确实带来了很多便利。另外它包含自带的filter，也可以自定义。 Filter作用 在表达式中过滤变量的值，包括数组、字符串等 格式化 Filter使用方法 在表达式中应用Filters （过滤器），需要遵循格式如
前言
这次系统学习了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个内建的过滤器,分别是：
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>
结果：
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |