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 相关文章推荐
js 异步处理进度条
Apr 01 Javascript
js输出列表实现代码
Sep 12 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 Javascript
让图片旋转任意角度及JQuery插件使用介绍
Mar 20 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
jquery复选框全选/取消示例
Dec 30 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 Javascript
es6数组includes()用法实例分析
Apr 18 Javascript
原生js实现随机点名
Jul 05 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 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 缓存函数代码
2008/08/27 PHP
超级实用的7个PHP代码片段分享
2012/01/05 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
DWZ+ThinkPHP开发时遇到的问题分析
2016/12/12 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
Javascript 继承实现例子
2009/08/12 Javascript
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
javascript 日期时间 转换的方法
2013/02/21 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
vue移动端实现手机左右滑动入场动画
2020/06/17 Javascript
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
python翻译软件实现代码(使用google api完成)
2013/11/26 Python
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
python中报错"json.decoder.JSONDecodeError: Expecting value:"的解决
2019/04/29 Python
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
2019/07/31 Python
Python Dict找出value大于某值或key大于某值的所有项方式
2020/06/05 Python
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
结婚典礼证婚词
2014/01/08 职场文书
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
兴趣小组活动总结
2014/05/05 职场文书
团队队名口号大全
2014/06/06 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书