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 监听textarea中按键事件
Oct 08 Javascript
jquery 页面全选框实践代码
Apr 02 Javascript
无缝滚动js代码通俗易懂(自写)
Jun 19 Javascript
Javascript中的apply()方法浅析
Mar 15 Javascript
JS随机调用指定函数的方法
Jul 01 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
Vue中的验证登录状态的实现方法
Mar 09 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
JavaScript制作3D旋转相册
Aug 02 Javascript
JS实现随机抽选获奖者
Nov 07 Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 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 基本语法格式
2009/12/15 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
js清空表单数据的两种方式(遍历+reset)
2014/07/18 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
JS库之Highlight.js的用法详解
2017/09/13 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
python Django框架实现自定义表单提交
2016/03/25 Python
Python实现求两个csv文件交集的方法
2017/09/06 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
python使用matplotlib画饼状图
2018/09/25 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
通过自学python能找到工作吗
2020/06/21 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
工商治理实习生的自我评价分享
2014/02/20 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
个人向公司借款协议书
2016/03/19 职场文书
演讲稿之开卷有益
2019/08/07 职场文书