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 相关文章推荐
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
Jun 21 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 Javascript
详解vue+webpack+express中间件接口使用
Jul 17 Javascript
Vue自定义toast组件的实例代码
Aug 15 Javascript
小程序云开发实现数据库异步操作同步化
May 18 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
Vue实现小购物车功能
Dec 21 Vue.js
使用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
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
浅谈PHP的反射API
2017/02/26 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
2011/06/28 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
javascript克隆对象深度介绍
2012/11/20 Javascript
利用javascript判断文件是否存在
2013/12/31 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
JSON取值前判断
2014/12/23 Javascript
JS判断是否360安全浏览器极速内核的方法
2015/01/29 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
2018/04/12 jQuery
javascript对HTML字符转义与反转义
2018/12/13 Javascript
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
使用pandas中的DataFrame数据绘制柱状图的方法
2018/04/10 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
Python注释、分支结构、循环结构、伪“选择结构”用法实例分析
2020/01/09 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
蔻驰西班牙官网:COACH西班牙
2019/01/16 全球购物
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
初中生期末考试的自我评价
2013/12/17 职场文书
建筑工程专业学生的自我评价
2013/12/25 职场文书
四川成都导游欢迎词
2014/01/18 职场文书
技能比赛获奖感言
2014/02/14 职场文书
地理教师岗位职责
2014/03/16 职场文书
防灾减灾日活动总结
2014/08/26 职场文书
员工培训协议书
2014/09/15 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
思想品德评语大全
2014/12/31 职场文书
研究生个人学年总结
2015/02/14 职场文书