angularJS 过滤器
2016-10-13 14:30
411 查看
1.数字格式化过滤器 number
{{ 123456789 | number }} 结果:12,345,678 每3位用逗号分隔
{{ 12345.6789 | number:2 }} 结果:12,345.68 每3位用逗号分隔,并保留2位小数
2.现金格式化过滤器 currency
{{ 999999 | currency }} 结果: $999,999.00
{{999999 | currency:'rmb'}} 结果: rmb999,999.00
3.日期格式化过滤器 date
{{today}} "2016-10-13T03:25:45.137Z"
{{today | date:'short'}} 10/13/16 11:29 AM
{{today | date:'medium'}} Oct 13, 2016 11:29:20 AM
{{today | date:'shortDate'}} 10/13/16
{{today | date:'mediumDate'}} Oct 13, 2016
{{today | date:'longDate'}} October 13, 2016
{{today | date:'fullDate'}} Thursday, October 13, 2016
{{today | date:'mediumTime'}} 11:29:20 AM
{{today | date:'shortTime'}} 11:29 AM
{{ today | date:'y-MM-d H:m:s' }} 2016-10-13 11:32:2
{{ today | date:'yyyy-MM-dd HH:mm:ss' }} 2016-10-13 11:32:02
4.大小写格式化过滤器 lowercase uppercase
{{ 'AbCdddEEE' | lowercase }} 结果:abcdddeee
{{ 'AbCdddEEE' | uppercase }} 结果:ABCDDDEEE
5.限制数组输出个数过滤器 limitTo
{{ [1,2,3,4,5,6,7] | limitTo:3 }} 结果: [1,2,3] 输出前3个
{{ [1,2,3,4,5,6,7] | limitTo:-3 }} 结果: [5,6,7] 输出最后3个
6.数组排序过滤器 orderBy
{{ city }} 为: [ {name:'上海',py:'shanghai'},{name:'北京',py:'beijing'},{name:'四川',py:'sichuan'} ]
按某个属性正序排列:
{{ city | orderBy:'py' }}
结果: [{"name":"北京","py":"beijing"},{"name":"上海","py":"shanghai"},{"name":"四川","py":"sichuan"}]
按某个属性倒序排列:
{{ city | orderBy:'-py' }}
结果: [{"name":"四川","py":"sichuan"},{"name":"上海","py":"shanghai"},{"name":"北京","py":"beijing"}]
7.数组过滤器 filter
{{ city | filter:'上海'}} 结果: [{"name":"上海","py":"shanghai"}]
{{ city | filter:'h'}} 结果: [{"name":"上海","py":"shanghai"},{"name":"四川","py":"sichuan"}]
{{ city | filter:{ py:'g' } }} 结果: [{"name":"上海","py":"shanghai"},{"name":"北京","py":"beijing"}]
8.控制器内使用过滤器和自定义过滤器
html:
<p>
使用自定义过滤器:
{{ data.city | filter : checkName }}
</p>
js:
{{ 123456789 | number }} 结果:12,345,678 每3位用逗号分隔
{{ 12345.6789 | number:2 }} 结果:12,345.68 每3位用逗号分隔,并保留2位小数
2.现金格式化过滤器 currency
{{ 999999 | currency }} 结果: $999,999.00
{{999999 | currency:'rmb'}} 结果: rmb999,999.00
3.日期格式化过滤器 date
{{today}} "2016-10-13T03:25:45.137Z"
{{today | date:'short'}} 10/13/16 11:29 AM
{{today | date:'medium'}} Oct 13, 2016 11:29:20 AM
{{today | date:'shortDate'}} 10/13/16
{{today | date:'mediumDate'}} Oct 13, 2016
{{today | date:'longDate'}} October 13, 2016
{{today | date:'fullDate'}} Thursday, October 13, 2016
{{today | date:'mediumTime'}} 11:29:20 AM
{{today | date:'shortTime'}} 11:29 AM
{{ today | date:'y-MM-d H:m:s' }} 2016-10-13 11:32:2
{{ today | date:'yyyy-MM-dd HH:mm:ss' }} 2016-10-13 11:32:02
4.大小写格式化过滤器 lowercase uppercase
{{ 'AbCdddEEE' | lowercase }} 结果:abcdddeee
{{ 'AbCdddEEE' | uppercase }} 结果:ABCDDDEEE
5.限制数组输出个数过滤器 limitTo
{{ [1,2,3,4,5,6,7] | limitTo:3 }} 结果: [1,2,3] 输出前3个
{{ [1,2,3,4,5,6,7] | limitTo:-3 }} 结果: [5,6,7] 输出最后3个
6.数组排序过滤器 orderBy
{{ city }} 为: [ {name:'上海',py:'shanghai'},{name:'北京',py:'beijing'},{name:'四川',py:'sichuan'} ]
按某个属性正序排列:
{{ city | orderBy:'py' }}
结果: [{"name":"北京","py":"beijing"},{"name":"上海","py":"shanghai"},{"name":"四川","py":"sichuan"}]
按某个属性倒序排列:
{{ city | orderBy:'-py' }}
结果: [{"name":"四川","py":"sichuan"},{"name":"上海","py":"shanghai"},{"name":"北京","py":"beijing"}]
7.数组过滤器 filter
{{ city | filter:'上海'}} 结果: [{"name":"上海","py":"shanghai"}]
{{ city | filter:'h'}} 结果: [{"name":"上海","py":"shanghai"},{"name":"四川","py":"sichuan"}]
{{ city | filter:{ py:'g' } }} 结果: [{"name":"上海","py":"shanghai"},{"name":"北京","py":"beijing"}]
8.控制器内使用过滤器和自定义过滤器
html:
<p>
使用自定义过滤器:
{{ data.city | filter : checkName }}
</p>
js:
var app=angular.module('myApp',[]); app.factory('Data',function(){ return { message:'HELLO KuGou!', city:[ {name:'上海',py:'shanghai'}, {name:'北京',py:'beijing'}, {name:'四川',py:'sichuan'} ] }; }); app.controller("myCtrl1",function($scope,Data,$filter){ $scope.data=Data; var nubmer=$filter('number')('3000'); //使用number过滤器 var jsonString=$filter('json')($scope.data); //使用json过滤器 主要用于调试 格式化json方便查看 console.log(jsonString); $scope.checkName=function(obj){ //自定义一个过滤器 if(obj.py.indexOf('h') === -1){ return false; }return true; }; });
相关文章推荐
- AngularJS过滤器filter用法实例分析
- AngularJS 过滤器
- angularjs 过滤器操作
- AngularJS - 过滤器
- [angularjs] angularjs系列笔记(四)过滤器
- AngularJS 的小demo——表头排序+表格搜索(过滤器)
- AngularJS 过滤器
- 【angularjs 自学系列】1.过滤器
- AngularJS中的过滤器使用详解
- AngularJS中内置过滤器问题?
- AngularJS中的过滤器filter用法完全解析
- 前端MVC学习总结(二)——AngularJS验证、过滤器、指令
- angularJS---自定义过滤器
- 采用JavaScript、AngularJS实现过滤器搜索、删除、添加、排序、常用过滤器
- angularJs - $filter过滤器使用和自定义过滤器
- AngularJS 过滤器
- AngularJS 过滤器
- angularjs中的filter(过滤器)——格式化日期的date
- Angularjs过滤器
- angularJS的过滤器