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 多种变量定义(对象直接量,数组直接量和函数直接量)
May 24 Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 Javascript
7个让JavaScript变得更好的注意事项
Jan 28 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
npm 下载指定版本的组件方法
May 17 Javascript
vue-router+nginx 非根路径配置方法
Jun 30 Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 Javascript
vue使用axios上传文件(FormData)的方法
Apr 14 Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
Apr 20 Javascript
Vue router安装及使用方法解析
Dec 02 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
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
PHP中simplexml_load_string函数使用说明
2011/01/01 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
实现PHP框架系列文章(6)mysql数据库方法
2016/03/04 PHP
WordPress分页伪静态加html后缀
2016/06/08 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
jQuery 性能优化指南 (1)
2009/05/21 Javascript
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
node.js中实现同步操作的3种实现方法
2014/12/05 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
2016/10/13 Javascript
解析Javascript单例模式概念与实例
2016/12/05 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
jQuery实现元素的插入
2017/02/27 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
2017/06/12 Javascript
JS鼠标滚动分页效果示例
2017/07/05 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
2017/08/14 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
vue $mount 和 el的区别说明
2020/09/11 Javascript
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
基于Python的身份证号码自动生成程序
2014/08/15 Python
numpy.array 操作使用简单总结
2019/11/08 Python
CSS3 :not()选择器实现最后一行li去除某种css样式
2016/10/19 HTML / CSS
英国最大的独立摄影零售商:Park Cameras
2019/11/27 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
幼教求职信
2014/03/12 职场文书
暑假家长评语大全
2014/04/17 职场文书
实训报告范文大全
2014/11/04 职场文书
酒店员工辞职信范文
2015/02/28 职场文书
郭明义观后感
2015/06/08 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
浅谈golang package中init方法的多处定义及运行顺序问题
2021/05/06 Golang