详解AngularJS过滤器的使用


Posted in Javascript onMarch 11, 2016

AnularJS的过滤器用来格式化需要展示给用户的数据,有很多实用的内置过滤器,也可以自己编写。

在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器。例如,假设我们希望将字符串
转换成大写,可以对字符串中的每个字符都单独进行转换操作,也可以使用过滤器:

{{ name | uppercase }}
在JavaScript代码中可以通过$filter来调用过滤器。例如,在JavaScript代码中使用lowercase
过滤器:

app.controller('DemoController', ['$scope', '$filter',
function($scope, $filter) {
$scope.name = $filter('lowercase')('Ari');
}]);

以HTML的形式使用过滤器时,如果需要传递参数给过滤器,只要在过滤器名字后面加冒号
即可。如果有多个参数,可以在每个参数后面都加入冒号。例如,数值过滤器可以限制小数点后
的位数,在过滤器后写上:2可以将2作为参数传给过滤器:

<!-- 显示:123.46 -->
{{ 123.456789 | number:2 }}

1. currency
currecy过滤器可以将一个数值格式化为货币格式。用{{ 123 | currency }}来将123转化
成货币格式。
currecy过滤器允许我们自己设置货币符号。默认情况下会采用客户端所处区域的货币符号,
但是也可以自定义货币符号。
2. date
date过滤器可以将日期格式化成需要的格式。AngularJS中内置了几种日期格式,如果没有
指定使用任何格式,默认会采用mediumDate格式,下面的例子中展示了这个格式。
下面是内置的支持本地化的日期格式:

{{ today | date:'medium' }} <!-- Aug 09, 2013 12:09:02 PM -->
{{ today | date:'short' }} <!-- 8/9/1312:09PM -->
{{ today | date:'fullDate' }} <!-- Thursday, August 09, 2013 -->
{{ today | date:'longDate' }} <!-- August 09, 2013 -->
{{ today | date:'mediumDate' }}<!-- Aug 09, 2013 -->
{{ today | date:'shortDate' }} <!-- 8/9/13 -->
{{ today | date:'mediumTime' }}<!-- 12:09:02 PM -->
{{ today | date:'shortTime' }} <!-- 12:09 PM -->

年份格式化
四位年份:{{ today | date:'yyyy' }} <!-- 2013 -->
两位年份:{{ today | date:'yy' }} <!-- 13 -->
一位年份:{{ today | date:'y' }} <!-- 2013 -->
月份格式化
英文月份:{{ today | date:'MMMM' }} <!-- August -->
英文月份简写:{{ today | date:'MMM' }} <!-- Aug -->
数字月份:{{ today |date:'MM' }} <!-- 08 -->
一年中的第几个月份:{{ today |date:'M' }} <!-- 8 -->
日期格式化
数字日期:{{ today|date:'dd' }} <!-- 09 -->
一个月中的第几天:{{ today | date:'d' }} <!-- 9 -->
英文星期:{{ today | date:'EEEE' }} <!-- Thursday -->
英文星期简写:{{ today | date:'EEE' }} <!-- Thu -->
小时格式化
24小时制数字小时:{{today|date:'HH'}} <!--00-->
一天中的第几个小时:{{today|date:'H'}} <!--0-->
12小时制数字小时:{{today|date:'hh'}} <!--12-->
上午或下午的第几个小时:{{today|date:'h'}} <!--12-->
分钟格式化
数字分钟数:{{ today | date:'mm' }} <!-- 09 -->
一个小时中的第几分钟:{{ today | date:'m' }} <!-- 9 -->
秒数格式化
数字秒数:{{ today | date:'ss' }} <!-- 02 -->
一分钟内的第几秒:{{ today | date:'s' }} <!-- 2 -->
毫秒数:{{ today | date:'.sss' }} <!-- .995 -->
下面是一些自定义日期格式的示例:

{{ today | date:'MMMd, y' }} <!-- Aug9, 2013 -->
{{ today | date:'EEEE, d, M' }} <!-- Thursday, 9, 8-->
{{ today | date:'hh:mm:ss.sss' }} <!-- 12:09:02.995 -->

filter

filter过滤器可以从给定数组中选择一个子集,并将其生成一个新数组返回。

例如,用下面的过滤器可以选择所有包含字母e的单词:

{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }}
<!-- ["Lerner","Likes","Eat"] -->

如果要过滤对象,可以使用上面提到的对象过滤器。例如,如果有一个由people对象组成的
数组,每个对象都含有他们最喜欢吃的食物的列表,那么可以用下面的形式进行过滤:

{{ [{
'name': 'Ari',
'City': 'San Francisco',
'favorite food': 'Pizza'
},{
'name': 'Nate',
'City': 'San Francisco',
'favorite food': 'indian food'
}] | filter:{'favorite food': 'Pizza'} }}
<!-- [{"name":"Ari","City":"SanFrancisco","favoritefood":"Pizza"}] -->

也可以用自定义函数进行过滤(在这个例子中函数定义在$scope上):

{{ ['Ari','likes','to','travel'] | filter:isCapitalized }}
<!-- ["Ari"] -->

isCapitalized函数的功能是根据首字母是否为大写返回true或false,具体如下所示:

$scope.isCapitalized = function(str) {
return str[0] == str[0].toUpperCase();
};

自定义过滤器

首先,创建一个模块用以在应用中进行引用

angular.module('myApp.filters', [])
.filter('capitalize', function() {
return function(input) {
// input是我们传入的字符串
if (input) {
return input[0].toUpperCase() + input.slice(1);
}
});

现在,如果想将一个句子的首字母转换成大写形式,可以用过滤器先将整个句子都转换成小
写,再把首字母转换成大写:

<!-- Ginger loves dog treats -->
{{ 'ginger loves dog treats' | lowercase | capitalize }}

以上就是AngularJS过滤器的使用方法,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jQuery 判断元素上是否绑定了事件
Oct 28 Javascript
UI Events 用户界面事件
Jun 27 Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
js一维数组、多维数组和对象的混合使用方法
Apr 03 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 Javascript
微信小程序template模版的使用方法
Apr 13 Javascript
AjaxFileUpload.js实现异步上传文件功能
Apr 19 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
node.JS二进制操作模块buffer对象使用方法详解
Feb 06 Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 #Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 #Javascript
基于jQuery日历插件制作日历
Mar 11 #Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 #Javascript
JavaScript获取客户端IP的方法(新方法)
Mar 11 #Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
Mar 11 #Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 #Javascript
You might like
提升PHP执行速度全攻略(上)
2006/10/09 PHP
桌面中心(四)数据显示
2006/10/09 PHP
用PHP进行MySQL删除记录操作代码
2008/06/07 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
2012/01/13 Javascript
Javascript中call的两种用法实例
2013/12/13 Javascript
JavaScript中对象属性的添加和删除示例
2014/05/12 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
如何编写一个完整的Angular4 FormText 组件
2017/11/18 Javascript
基于打包工具Webpack进行项目开发实例
2018/05/29 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
jQuery创建折叠式菜单
2019/06/15 jQuery
小程序实现日历左右滑动效果
2019/10/21 Javascript
简单了解JavaScript作用域
2020/07/31 Javascript
Python实现的ini文件操作类分享
2014/11/20 Python
Python版微信红包分配算法
2015/05/04 Python
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
Django自定义插件实现网站登录验证码功能
2017/04/19 Python
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
Django实现网页分页功能
2019/10/31 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
Python web如何在IIS发布应用过程解析
2020/05/27 Python
python 爬取腾讯视频评论的实现步骤
2021/02/18 Python
AOP的定义以及作用
2013/09/08 面试题
协议书怎么写
2014/04/21 职场文书
涉外离婚协议书怎么写
2014/11/20 职场文书
2014年安置帮教工作总结
2014/12/11 职场文书
会计求职简历自我评价
2015/03/10 职场文书
员工升职自荐信
2015/03/27 职场文书
Python编写nmap扫描工具
2021/07/21 Python
Android中View.post和Handler.post的关系
2022/06/05 Java/Android