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 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
原始XMLHttpRequest方法详情回顾
Nov 28 Javascript
JavaScript Promise启示录
Aug 12 Javascript
js中substring和substr两者区别和使用方法
Nov 09 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
详解Node项目部署到云服务器上
Jul 12 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
微信小程序实现日历效果
Dec 28 Javascript
Angular CLI发布路径的配置项浅析
Mar 29 Javascript
vue 数字翻牌器动态加载数据
Apr 20 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 空格,换行,跳格使用说明
2009/12/18 PHP
php && 逻辑与运算符使用说明
2010/03/04 PHP
色色整理的PHP面试题集锦
2012/03/08 PHP
php合并js请求的例子
2013/11/01 PHP
PHP扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
微信封装的调用微信签名包的类库
2017/06/08 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
由Javascript实现的页面日历
2011/11/04 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
2012/12/09 Javascript
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
jQuery中bind与live的用法及区别小结
2014/01/27 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
2014/02/13 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
2015/03/04 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
js实现n秒倒计时后才可以点击的效果
2015/12/20 Javascript
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
完美解决js传递参数中加号和&号自动改变的方法
2016/10/11 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
Vue中使用sass实现换肤功能
2018/09/07 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
vant自定义二级菜单操作
2020/11/02 Javascript
Python入门篇之文件
2014/10/20 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
Python数组并集交集补集代码实例
2020/02/18 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
python关于倒排列的知识点总结
2020/10/13 Python
新加坡网上花店:FlowerAdvisor新加坡
2018/10/05 全球购物
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
实习教师个人的自我评价
2013/11/08 职场文书
感恩老师主题班会
2015/08/12 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang
MySQL修改默认引擎和字符集详情
2021/09/25 MySQL
vue 给数组添加新对象并赋值
2022/04/20 Vue.js