Angular学习笔记之angular的$filter服务浅析


Posted in Javascript onNovember 12, 2016

首先,介绍下$filter服务:

1、$filter是用来进行数据格式化的专用服务;

2、AngularJS内置了currency、date、filter、json、limitTo、lowercase、uppercase、number、orderBy这8个filter;

3、filter可以嵌套使用,用管道符号"|"来分隔(有点像linux);

4、filter可以传递参数;

5、用户可自定义filter。

介绍下内置filter:

currency:用于格式化货币,如在数值前自动加上"$"或"¥"之类的。

date:格式化日期,它会提供丰富的日期格式。

json:完成json格式化。

number:如转成两位小数等。

orderBy:进行排序。

filter的简单使用:

{{ 1304375948024 | date }}
{{ 1304375948024 | date:"MM/dd/yyyy h:mma" }}
{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }}
{{ 30 | currency }}

输出:

May 3, 2011
05/03/2011 6:39AM
2011-05-03 06:39:08
$30.00

自定义filter:

eg:

var myModule = angular.module('myModule',[]);
myModule.filter('myFilter',function(){
return function(item){
return 'Hi,'+item;
}
});

使用: {{ 'JennyLin' | myFilter }}

以上内容比较详细的给大家介绍了angular的$filter服务,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
javascript window.opener的用法分析
Apr 07 Javascript
jquery zTree异步加载简单实例分享
Feb 05 Javascript
node.js调用C++开发的模块实例
Jul 03 Javascript
jQuery插件Validate实现自定义表单验证
Jan 18 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
Feb 19 Javascript
js面向对象的写法
Feb 19 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
深入理解angular2启动项目步骤
Jul 15 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
详解Vue中watch的高级用法
May 02 Javascript
vue实现tab栏点击高亮效果
Aug 19 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 #Javascript
JavaScript中浅讲ajax图文详解
Nov 11 #Javascript
javascript 实现动态侧边栏实例详解
Nov 11 #Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
Nov 11 #Javascript
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 #Javascript
JSON与XML的区别对比及案例应用
Nov 11 #Javascript
浅谈AngularJS中ng-class的使用方法
Nov 11 #Javascript
You might like
用PHP创建PDF中文文档
2006/10/09 PHP
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
通过PHP修改Linux或Unix口令的方法分享
2012/01/30 PHP
php调用Google translate_tts api实现代码
2013/08/07 PHP
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
JS 添加网页桌面快捷方式的代码详细整理
2012/12/27 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
实现JavaScript的组成----BOM和DOM详解
2016/05/18 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
Vue 嵌套路由使用总结(推荐)
2020/01/13 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
Python使用random和tertools模块解一些经典概率问题
2015/01/28 Python
在django中使用自定义标签实现分页功能
2017/07/04 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
python datetime时间格式的相互转换问题
2020/06/11 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
湖南卫视在线视频媒体平台:芒果TV
2019/10/30 全球购物
意大利和国际最佳时尚品牌:Drestige
2019/12/28 全球购物
自荐信怎么写呢?
2013/12/09 职场文书
《梅兰芳学艺》教学反思
2014/02/24 职场文书
初中班主任评语
2014/04/24 职场文书
兴趣小组活动总结
2014/05/05 职场文书
商务日语专业的自荐信
2014/05/23 职场文书
管理岗位竞聘演讲稿
2014/08/18 职场文书
纪念一二九运动演讲稿
2014/09/16 职场文书
六五普法宣传标语
2014/10/06 职场文书
拾金不昧表扬稿大全
2015/05/05 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
工作汇报材料难写?方法都在这里了!
2019/07/01 职场文书
Pytest中conftest.py的用法
2021/06/27 Python