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 相关文章推荐
学习ExtJS TextField常用方法
Oct 07 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
Apr 06 Javascript
javascript每日必学之继承
Feb 23 Javascript
javascript实现数组去重的多种方法
Mar 14 Javascript
实例解析jQuery工具函数
Dec 01 Javascript
简单的渐变轮播插件
Jan 12 Javascript
原生js实现打字动画游戏
Feb 04 Javascript
AngularJs 常用的过滤器
May 15 Javascript
vue中将网页打印成pdf实例代码
Jun 15 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
vue 使用async写数字动态加载效果案例
Jul 18 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 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
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
Asp.net下使用Jquery Ajax传送和接收DataTable的代码
2010/09/12 Javascript
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
jQuery中ajax和post处理json的不同示例对比
2014/11/02 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
jQuery简单实现日历的方法
2015/05/04 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
关于ES6的六个小特性(二)
2017/02/20 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
微信小程序 生成携带参数的二维码
2019/10/23 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
Python版微信红包分配算法
2015/05/04 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
Django重设Admin密码过程解析
2020/02/10 Python
Envie de Fraise意大利:法国网上推出的孕妇装品牌
2020/10/18 全球购物
AJax面试题
2014/11/25 面试题
市场营销专科应届生求职信
2013/11/24 职场文书
应届毕业生个人自荐信范文
2013/11/30 职场文书
倡议书范文大全
2015/04/28 职场文书
消夏晚会主持词
2015/06/30 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
Django项目如何正确配置日志(logging)
2021/04/29 Python
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android