Angular.js过滤器(filter)
在Angular.js里过滤器是用来格式化数据的，过滤器分内置过滤器和自定义过滤器。
绑定数据时在符号 {{}} 内使用 | 来调用过滤器。
让我们来认识下过滤器吧
内置过滤器
1.大小写转换，uppercase、lowercase
{{ "aaaa" | uppercase }} // AAAA
{{ "BBBB" | lowercase }} // bbbb
2.货币格式化，currency
{{123|currency:'￥'}} // ￥123.00
{{123|currency}} // $123.00
{{123|currency:'RMB ￥'}} // RMB ￥123.00
3.日期格式化，date
{{1427345339072 | date}} // Mar 26, 2015
{{ 1427345339072 | date:'medium' }} // Mar 26, 2015 12:48:59 PM
{{ 1427345339072 | date:'short' }} // 3/26/15 12:48 PM
{{ 1427345339072 | date:'fullDate' }} // Thursday, March 26, 2015
{{ 1427345339072 | date:'longDate' }} // March 26, 2015
{{ 1427345339072 | date:'mediumDate' }} // Mar 26, 2015
{{ 1427345339072 | date:'shortDate' }} // 3/26/15
{{ 1427345339072 | date:'mediumTime' }} // 12:48:59 PM
{{ 1427345339072 | date:'shortTime' }} // 12:48 PM
四位年份：{{ 1427345339072 | date:'yyyy' }} // 2015
两位年份：{{ 1427345339072 | date:'yy' }} //15
一位年份：{{ 1427345339072 | date:'y' }} // 2015
英文月份：{{ 1427345339072 | date:'MMMM' }} // March
英文月份简写：{{ 1427345339072 | date:'MMM' }} // Mar
数字月份：{{ 1427345339072 |date:'MM' }} // 03
一年中的第几个月份：{{ 1427345339072 |date:'M' }} // 3
数字日期：{{ 1427345339072|date:'dd' }} // 26
一个月中的第几天：{{ 1427345339072 | date:'d' }} // 26
英文星期：{{ 1427345339072 | date:'EEEE' }} // Thursday
英文星期简写：{{ 1427345339072 | date:'EEE' }} // Thu
24小时制数字小时：{{1427345339072|date:'HH'}} // 12
一天中的第几个小时：{{1427345339072|date:'H'}} // 12
12小时制数字小时：{{1427345339072|date:'hh'}} // 12
上午或下午的第几个小时：{{1427345339072|date:'h'}} // 12
数字分钟数：{{ 1427345339072 | date:'mm' }} // 48
一个小时中的第几分钟：{{ 1427345339072 | date:'m' }} // 48
数字秒数：{{ 1427345339072 | date:'ss' }} // 59
一分钟内的第几秒：{{ 1427345339072 | date:'s' }} // 59
毫秒数：{{ 1427345339072 | date:'.sss' }} // 0.072
4.数字格式化，number
{{12.13534|number:2}} // 12.14 四舍五入保留两位小数
{{10000000|number}} // 10,000,000
5.json格式化
{{ {name: '张三', sex: '男'} | json }}
// { "name": "张三", "sex": "男" } json过滤器可以将一个JSON或JavaScript对象转换成字符串。
6. filter查找
{{ [{"name": "张三","id": 10},
{"name": "李四","id": 11},
{"name": "张五","id": 12}
] | filter:"张"}}
// [{"name":"张三","id":10},{"name":"张五","id":12}] 查找含有有张的行
7.orderBy
{{ [{"name": "张三","id": 15},
{"name": "李四","id": 11},
{"name": "张五","id": 12}
] | orderBy:'id':true}} // 降序
{{ [{"name": "张三","id": 15},
{"name": "李四","id": 11},
{"name": "张五","id": 12}
] | orderBy:'id'}} // 升序
8.limitTo
{{ [{"name": "张三","id": 15},
{"name": "李四","id": 11},
{"name": "张五","id": 12}
] | limitTo:1}} // [{"name":"张三","id":15}] 返回第一行
{{ "ABCDEFGHIJK" | limitTo:5 }} // ABCDE
自定义过滤器
var app = angular.module('app', []);
// 创建控制器
app.controller('filcon', function ($scope) {
$scope.name = "张三";
});
// 创建过滤函数
app.filter("addStr", function () {
var txt = function (param) {
return param + " 加李四";
}
return txt;
});
<div ng-app="app">
<div ng-controller="filcon">
{{name | addStr}}
</div>
</div>
// 张三 加李四 （页面调用结果）