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 相关文章推荐
自动检查并替换文本框内的字符
Jun 30 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
Mar 28 Javascript
js取得url地址参数实例
Feb 22 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
Javascript的表单验证长度
Mar 16 Javascript
jQuery获取单击节点对象的方法
Jun 02 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
js 颜色选择插件
Jan 23 Javascript
使用Angular-CLI构建NPM包的方法
Sep 07 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 Javascript
vue router 传参获取不到的解决方式
Nov 13 Javascript
使用typescript改造koa开发框架的实现
Feb 04 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分页显示制作详细讲解
2006/10/09 PHP
PHP 根据IP地址控制访问的代码
2010/04/22 PHP
ThinkPHP在新浪SAE平台的部署实例
2014/10/31 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
PHP使用PDO访问oracle数据库的步骤详解
2017/09/29 PHP
laravel 解决路由除了根目录其他都404的问题
2019/10/18 PHP
PHP文件打开关闭及读写操作示例解析
2020/08/06 PHP
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
jQuery实现基本动画效果的方法详解
2018/09/06 jQuery
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
2020/04/11 Javascript
JavaScript交换变量的常用方法小结【4种方法】
2020/05/07 Javascript
[01:50]《我与DAC》之玩家:iG夺冠时的那面红旗
2018/03/29 DOTA
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
Python3.6日志Logging模块简单用法示例
2018/06/14 Python
详解Django-auth-ldap 配置方法
2018/12/10 Python
Python小进度条显示代码
2019/03/05 Python
python实现远程控制电脑
2019/05/23 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
Python super()方法原理详解
2020/03/31 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
幼儿园大班开学教师寄语
2014/04/03 职场文书
2014年社区工作总结
2014/11/18 职场文书
2015年师德师风自我评价范文
2015/03/05 职场文书
德生BCL3000抢先使用感受和评价
2022/04/07 无线电