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的caller,callee,call,apply
Apr 28 Javascript
js写的评论分页(还不错)
Dec 23 Javascript
jquery中load方法的用法及注意事项说明
Feb 22 Javascript
JS实现文字放大效果的方法
Mar 03 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
实现JavaScript的组成----BOM和DOM详解
May 18 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
Jun 08 Javascript
详解Vue爬坑之vuex初识
Jun 14 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
微信小程序实现吸顶效果
Jan 08 Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 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
地球防卫队:陪着奥特曼打小怪兽的人类力量 那些经典队服
2020/03/08 日漫
在apache下限制每个虚拟主机的并发数!!!!
2006/10/09 PHP
深入phpMyAdmin的安装与配置的详细步骤
2013/05/07 PHP
php三种实现多线程类似的方法
2015/10/30 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
php解决和避免form表单重复提交的几种方法
2016/08/31 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
ExtJs扩展之GroupPropertyGrid代码
2010/03/05 Javascript
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
jquery显示隐藏input对象
2014/07/21 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
javascript版2048小游戏
2015/03/18 Javascript
jQuery Ajax 异步加载显示等待效果代码分享
2016/08/01 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
javascript中的隐式调用
2018/02/10 Javascript
angular使用md5,CryptoJS des加密的方法
2019/06/03 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
[02:32]DOTA2亚洲邀请赛 C9战队出场宣传片
2015/02/07 DOTA
[49:27]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第一场
2018/04/05 DOTA
[08:40]Navi Vs Newbee
2018/06/07 DOTA
python实现随机森林random forest的原理及方法
2017/12/21 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
Django 内置权限扩展案例详解
2019/03/04 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
ML神器:sklearn的快速使用及入门
2019/07/11 Python
利用Python复制文件的9种方法总结
2019/09/02 Python
ipad上运行python的方法步骤
2019/10/12 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
2014年采购部工作总结
2014/11/20 职场文书
归元寺导游词
2015/02/06 职场文书
党员带头倡议书
2015/04/29 职场文书
如何在Python中创建二叉树
2021/03/30 Python