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> // 张三 加李四 (页面调用结果)
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。