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 相关文章推荐
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 Javascript
js constructor的实际作用分析
Nov 15 Javascript
JQuery实现级联下拉框效果实例讲解
Sep 17 Javascript
简单的js表格操作
Sep 24 Javascript
网页瀑布流布局jQuery实现代码
Oct 21 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 Javascript
Vue加载json文件的方法简单示例
Jan 28 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
Apr 25 Javascript
es6函数之尾递归用法实例分析
Apr 25 Javascript
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
Javascript中的解构赋值语法详解
Apr 02 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下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
Javascript的&&和||的另类用法
2014/07/23 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
bootstrap table表格插件使用详解
2017/05/08 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
Django开发的简易留言板案例详解
2018/12/04 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
python 计算平均平方误差(MSE)的实例
2019/06/29 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
Python的控制结构之For、While、If循环问题
2020/06/30 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
Timberland美国官网:全球领先的户外品牌
2016/08/15 全球购物
次世代生活态度:Hypebeast
2018/07/05 全球购物
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
会计专业应届生自荐信
2014/02/07 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
2019暑期安全倡议书!
2019/06/27 职场文书