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 相关文章推荐
文本框回车提交与禁止提交示例
Sep 27 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
微信小程序 video组件详解
Oct 25 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 Javascript
Vue监听数组变化源码解析
Mar 09 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
Jul 27 Javascript
vuex中使用对象展开运算符的示例
Sep 25 Javascript
Node.js readline 逐行读取、写入文件内容的示例
Mar 01 Javascript
vue+element+Java实现批量删除功能
Apr 08 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 Javascript
通过vue.extend实现消息提示弹框的方法记录
Jan 07 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
php 数组使用详解 推荐
2011/06/02 PHP
php中取得文件的后缀名?
2012/02/20 PHP
php正则表达式使用的详细介绍
2013/04/27 PHP
PHP读取文件内容的五种方式
2015/12/28 PHP
PHP钩子实现方法解析
2019/05/21 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
Javascript学习笔记5 类和对象
2010/01/11 Javascript
JQuery的html(data)方法与<script>脚本块的解决方法
2010/03/09 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
2013/10/14 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
轻松创建nodejs服务器(9):实现非阻塞操作
2014/12/18 NodeJs
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
javascript this详细介绍
2016/09/19 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
js下拉菜单生成器dropMenu使用方法详解
2017/08/01 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
[05:49]2014DOTA2TI4正赛第二日综述 昔日冠军纷纷落马 VG LGD占尽先机
2014/07/20 DOTA
[00:12]2018DOTA2亚洲邀请赛 Sccc亮相SOLO赛,今年他又会有什么样的战绩?
2018/04/06 DOTA
[01:16:37]【全国守擂赛】第三周决赛 Dark Knight vs. 一个弱队
2020/05/04 DOTA
python字典多条件排序方法实例
2014/06/30 Python
python求crc32值的方法
2014/10/05 Python
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
python3学习笔记之多进程分布式小例子
2018/02/13 Python
基于python实现KNN分类算法
2020/04/23 Python
Python warning警告出现的原因及忽略方法
2020/01/31 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
中西医专业毕业生职业规划书
2014/02/24 职场文书
初中优秀班集体申报材料
2014/05/01 职场文书
学习型党组织心得体会
2014/09/12 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
Golang MatrixOne使用介绍和汇编语法
2022/04/19 Golang