详解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为textarea添加maxlength属性的代码
Apr 07 Javascript
Javascript动态绑定事件的简单实现代码
Dec 25 Javascript
js报$ is not a function 的问题的解决方法
Jan 20 Javascript
用原生JS获取CLASS对象(很简单实用)
Oct 15 Javascript
javascript表单验证大全
Aug 12 Javascript
RequireJS入门一之实现第一个例子
Sep 30 Javascript
javascript如何实现暂停功能
Nov 06 Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 Javascript
Vue2实现组件props双向绑定
Dec 02 Javascript
自制简易打赏功能的实例
Sep 02 Javascript
vue-content-loader内容加载器的使用方法
Aug 05 Javascript
Vue和React组件之间的传值方式详解
Jan 31 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桌面中心(四) 数据显示
2007/03/11 PHP
初次接触php抽象工厂模式(Elgg)
2010/03/21 PHP
强烈声明: 不要使用(include/require)_once
2013/06/06 PHP
php实现分页工具类分享
2014/01/09 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
取得一定长度的内容,处理中文
2006/12/20 Javascript
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
2016/06/13 Javascript
bootstrap实现图片自动轮播
2016/12/21 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
Popup弹出框添加数据实现方法
2017/10/27 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
python实现在控制台输入密码不显示的方法
2015/07/02 Python
SVM基本概念及Python实现代码
2017/12/27 Python
使用python实现链表操作
2018/01/26 Python
什么是python的自省
2020/06/21 Python
图解Python中深浅copy(通俗易懂)
2020/09/03 Python
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
初中生物教学反思
2014/01/10 职场文书
物业保安员岗位职责
2014/03/14 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
检讨书怎么写?
2019/06/21 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python
不要在HTML中滥用div
2021/05/08 HTML / CSS
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis
PostgreSQL常用字符串分割函数整理汇总
2022/07/07 PostgreSQL