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 相关文章推荐
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 Javascript
JavaScript 保存数组到Cookie的代码
Apr 14 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
Jan 04 Javascript
打印json对象的内容及JSON.stringify函数应用
Mar 29 Javascript
JS实现多物体缓冲运动实例代码
Nov 29 Javascript
关于JavaScript中name的意义冲突示例介绍
May 29 Javascript
jQuery zTree加载树形菜单功能
Feb 25 Javascript
jQuery、zepto、js常用小技巧
Feb 12 Javascript
解决vue build打包之后首页白屏的问题
Mar 06 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
Mar 13 Javascript
JS对象与json字符串相互转换实现方法示例
Jun 14 Javascript
微信运维交互机器人的示例代码
Nov 12 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
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
php 魔术方法详解
2014/11/11 PHP
基于thinkPHP3.2实现微信接入及查询token值的方法
2017/04/18 PHP
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
2013/06/28 Javascript
jquery得到font-size属性值实现代码
2013/09/30 Javascript
Android中的jQuery:AQuery简介
2014/05/06 Javascript
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
学习使用Bootstrap栅格系统
2017/05/11 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
js+html5实现复制文字按钮
2017/07/15 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
Vue中的$set的使用实例代码
2018/10/08 Javascript
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
利用Vue实现一个markdown编辑器实例代码
2019/05/19 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
python 实现生成均匀分布的点
2019/12/05 Python
将matplotlib绘图嵌入pyqt的方法示例
2020/01/08 Python
Pandas将列表(List)转换为数据框(Dataframe)
2020/04/24 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
护理专业毕业生推荐信
2013/10/31 职场文书
城建学院毕业生自荐信
2014/01/31 职场文书
先进班集体申报材料
2014/12/26 职场文书
土建施工员岗位职责
2015/04/11 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
中学教代会开幕词
2016/03/04 职场文书
七年级话题作文之执着
2019/11/19 职场文书
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python
IIS服务器中设置HTTP重定向访问HTTPS
2022/04/29 Servers