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 valueOf 使用方法
Dec 28 Javascript
JavaScript 用Node.js写Shell脚本[译]
Sep 20 Javascript
jquery实现滑动图片自己测试的例子
Nov 05 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 Javascript
js中各种类型的变量在if条件中是true还是false
Jul 16 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
vue实现动态数据绑定
Apr 28 Javascript
微信小程序联网请求的轮播图
Jul 07 Javascript
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
深入理解Promise.all
Aug 08 Javascript
一步一步实现Vue的响应式(对象观测)
Sep 02 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获取文件行数的方法
2015/06/10 PHP
Java中final关键字详解
2015/08/10 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
js模仿php中strtotime()与date()函数实现方法
2015/08/11 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
2017/09/18 Javascript
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
js实现搜索栏效果
2018/11/16 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
JavaScript实现筛选数组
2021/03/02 Javascript
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
在Python中使用第三方模块的教程
2015/04/27 Python
完美解决python遍历删除字典里值为空的元素报错问题
2016/09/11 Python
git进行版本控制心得详谈
2017/12/10 Python
Python实现简单文本字符串处理的方法
2018/01/22 Python
transform python环境快速配置方法
2018/09/27 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
使用Python FastAPI构建Web服务的实现
2020/06/08 Python
python中def是做什么的
2020/06/10 Python
考试作弊被抓检讨书
2014/01/10 职场文书
2015年化验员工作总结
2015/04/10 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
六五普法学习心得体会
2016/01/21 职场文书
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python
windows server2016安装oracle 11g的图文教程
2022/07/15 Servers