Angular - 过滤器
什么是过滤器
过滤器可以用来格式化需要展示的数据。AngularJS 有很多内置过滤器，同时也可以自己创建过滤器。
如何使用过滤器
- 在
HTML模板绑定符号{{}}中通过|来调用过滤器，若需要传递参数，过滤器名字后面以:分隔；
例：
{{ time | date }}
{{ time | date : 'yyy-MM-dd' }} - 在
js代码中通过$filter调用。
例：
angular.module('myApp', [])
.controller('MyCtrl', ['$scope', '$filter', function ($scope, $filter) {
$scope.time = $filter('date')(1249448523423)
}]);
内置过滤器
-
currency：
currency可以将数值格式化成货币格式（currency允许自定义设置货币符号，默认采用客户端所在区域货币符号）。 -
date：
date可以将日期格式化成需要的格式（默认采用mediumDate格式）。
(1). AngularJS内置的支持本地化的日期格式：-
{{ time | date : 'medium' }}=> Aug 5, 2009 1:02:03 PM -
{{ time | date : 'short' }}=> 8/5/09 1:02 PM -
{{ time | date : 'fullDate' }}=> Wednesday, August 5, 2009 -
{{ time | date : 'longDate' }}=> August 5, 2009 -
{{ time | date : 'mediumDate' }}=> Aug 5, 2009 -
{{ time | date : 'shortDate' }}=> 8/5/09 -
{{ time | date : 'mediumTime' }}=> 1:02:03 PM -
{{ time | date : 'shortTime' }}=> 1:02 PM
(2). 年份格式化
- 四位：
{{ time | date : 'yyyy' }}=> 2009 - 两位：
{{ time | date : 'yy' }}=> 09 - 一位：
{{ time | date : 'y' }}=> 2009
(3). 月份格式化
- 英文：
{{ time | date : 'MMMM' }}=> August - 英文简写：
{{ time | date : 'MMM' }}=> Aug - 数字：
{{ time | date : 'MM' }}=> 08 - 一年中第几月：
{{ time | date : 'M' }}=> 8
(4). 日期格式化
- 英文星期：
{{ time | date : 'EEEE' }}=> Wednesday - 英文星期简写：
{{ time | date : 'EEE' }}=> Wed - 数字日期：
{{ time | date : 'dd' }}=> 05 - 一月中第几天：
{{ time | date : 'd' }}=> 5
(5). 小时格式化
- 24时：
{{ time | date : 'HH' }}=> 13 - 一天中第几个小时：
{{ time | date : 'H' }}=> 13 - 12时：
{{ time | date : 'hh' }}=> 01 - 上午或下午第几小时：
{{ time | date : 'h' }}=> 1
(6). 分钟格式化
- 数字：
{{ time | date : 'mm' }}=> 02 - 一小时中第几分钟：
{{ time | date : 'm' }}=> 2
(7). 秒数格式化
- 数字：
{{ time | date : 'ss' }}=> 03 - 一分钟中第几秒：
{{ time | date : 's' }}=> 3 - 毫秒：
{{ time | date : 'sss' }}=> 423
(8). 字符格式化
- 上下午标识：
{{ time | date : 'a' }}=> PM - 四位时区标识：
{{ time | date : 'Z' }}=> +0800
(9). 自定义
-
{{ time | date : 'MMMd, y' }}=> Aug5, 2009 -
{{ time | date : 'EEEE, d, M' }}=> Wednesday, 5, 8 -
{{ time | date : 'hh:mm:ss.sss' }}=> 01:02:03.423
-
-
filter：
filter可以从给定的数组中选择一个子集，并将其生成一个新数组返回。
(1). 第一个参数可以为字符串、对象或函数：- 字符串：返回包含这个字符串的元素；
- !字符串：返回不包含这个字符串的元素；
- 对象：将带过滤对象的属性同该对象的同名属性比较，若属性值包含则返回（若想全部属性对比，可以用
$作为键名）； - 函数：对每个元素执行该函数，若为真则返回。
-
json：
json可以将 JSON 或 JavaScript 对象转换成字符串。 -
limitTo：
limitTo会根据传入的参数生成一个新的数字或字符串，长度取决于参数，参数正负决定从前截取还是从后截取（如果参数大于被操作数组或字符串长度，那么会全部返回）。 -
lowercase：
lowercase将字符串转为小写。 -
number：
number将数字格式化成文本，参数可选，用来控制小数点后位数（若传入一个非数字字符，则返回空字符串）。
例：{{ 1249448523423.2134 | number : 2 }}=> 1,249,448,523,423.21 -
orderBy：
orderBy可以用表达式对指定数组进行排序。
orderBy接受两个参数：第一个参数是用来确定数组排序方向谓词（必填）；第二个参数用来控制排序方向是否逆向（选填）。
{{ [{
name: 'a',
age: 21
}, {
name: 'c',
age: 18
}, {
name: 'b',
age: 24
}] | orderBy : 'name' }}
=> [{"name":"a","age":21},{"name":"b","age":24},{"name":"c","age":18}]
-
uppercase：
uppercase将字符串转为大写。
自定义过滤器
创建一个自定义过滤器需要将其放到自己的模块中。
<div ng-app='myApp'>
<ul>
<li ng-repeat="val in [1, 2, 3]">{{val | typeChange}}</li>
</ul>
</div>
<script>
angular.module('myApp', [])
.filter('typeChange', function () {
var typeList = {
1: '未开始',
2: '进行中',
3: '已结束',
}
return function (input) {
if (input) {
return typeList[input];
}
}
});
</script>
