详解AngularJS Filter(过滤器)用法


Posted in Javascript onDecember 28, 2015

AngularJS的filter,中文名“过滤器”是用来过滤变量的值,或者格式化输出,得到自己所期望的结果或格式的东东。

Filter简介

Filter是用来格式化数据用的。

Filter的基本原型( ‘|' 类似于Linux中的管道模式):

{{ expression | filter }}

Filter可以被链式使用(即连续使用多个filter):

{{ expression | filter1 | filter2 | ... }}

Filter也可以指定多个参数:

{{ expression | filter:argument1:argument2:... }}

一、在视图模板(View Template)中使用

在表达式中应用Filters (过滤器)

需要遵循格式如下:

{{ expression | filter }} 即 {{ 表达式 | 过滤器 }}

例如:{{ 12 | currency }} 输出为 $12.00

详解AngularJS Filter(过滤器)用法

在输出结果中应用Filters (过滤器)

通俗点讲就是Filter的叠加--前一filter的输出结果作为后一filter的输入数据源.

需要遵循格式如下:

{{ expression | filter1 | filter2 | ... }} 即 表达式(expression)使用filter1过滤后再使用filter2过滤...

详解AngularJS Filter(过滤器)用法

带参数的Filter

Filter后面可以跟一个或多个参数,用来帮助实现特殊要求、需求的filter.

需要遵循格式如下:

{{ expression | filter:argument1:argument2:... }}

示例: {{ 1234 | number:2 }} = 1,234.00

详解AngularJS Filter(过滤器)用法

二、使用 AngluarJS 内置Filter

AngularJS为我们提供了9个内建的过滤器

分别是currency, date, filter, json, limitTo, uppercase, lowercase, number, orderBy。

具体的用法在AngularJS的文档中都有详细说明。下面只说几个常用的。

currency filter(货币过滤器)

currency ? 用来将变量转换成货币表现形式

如:{{ amount | currency}}

详解AngularJS Filter(过滤器)用法

uppercase/lowercase filter(字母大小写filter)

如:

{{ "lower cap string" | uppercase }}
<input ng-model="userInput"> Uppercased: {{ userInput | uppercase }}

详解AngularJS Filter(过滤器)用法

date filter (日期filter)

如:

{{ 1304375948024 | date }}
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}

详解AngularJS Filter(过滤器)用法

json filter

如:

{{ {foo: "bar", baz: 23} | json }}

详解AngularJS Filter(过滤器)用法

在controllers, services和drictives中使用filter

可以在AngularJS的controller, service或者driective中使用filter, 这时候你需要将依赖的filter名字加入到controller, service或者directive的依赖中去。

在controller中直接使用filter, 这样controller可以根据自身需要而适时调用filter

详解AngularJS Filter(过滤器)用法

三、自定义filter(过滤器)

AngularJS编写自定义过滤器的形式和AngularJS的factory service非常相像,一定记得它返回一个对象或者是一个函数即可,编写的时候,只需要一个带有一个以上参数的函数即可。

格式大致如:

app.filter('filter(过滤器)名称',function(){ 
return function(需要过滤的对象,过滤器参数1,过滤器参数2,...){ 
//...执行业务逻辑代码 
return 处理后的对象; 
}
});

详解AngularJS Filter(过滤器)用法

Javascript 相关文章推荐
用js得到网页中所有的div的id
Oct 19 Javascript
用js计算页面执行时间的函数
Dec 07 Javascript
JavaScript/jQuery 表单美化插件小结
Feb 14 Javascript
jQuery之$(document).ready()使用介绍
Apr 05 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
jQuery团购倒计时特效实现方法
May 07 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
xtemplate node.js 的使用方法实例解析
Aug 22 Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 Javascript
浅谈小程序globalData的那些事儿
Nov 01 Javascript
详解TS数字分隔符和更严格的类属性检查
May 06 Javascript
原生JavaScript实现瀑布流布局
Jun 28 #Javascript
js实现瀑布流的三种方式比较
Jun 28 #Javascript
详解AngularJS中自定义过滤器
Dec 28 #Javascript
js运动应用实例解析
Dec 28 #Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 #Javascript
浅析JS运动
Dec 28 #Javascript
基于JavaScript实现网页倒计时自动跳转代码
Dec 28 #Javascript
You might like
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
PHP输出时间差函数代码
2013/01/28 PHP
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
php输出指定时间以前时间格式的方法
2015/03/21 PHP
php上传excel表格并获取数据
2017/04/27 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
php实现的数组转xml案例分析
2019/09/28 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
easyui-combobox 实现简单的自动补全功能示例
2016/11/08 Javascript
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
JS中的phototype详解
2017/02/04 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
python线程中的同步问题及解决方法
2019/08/29 Python
解决启动django,浏览器显示“服务器拒绝访问”的问题
2020/05/13 Python
python GUI模拟实现计算器
2020/06/22 Python
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
高级Java程序员面试题
2016/06/23 面试题
个人素质的自我评价分享
2013/12/16 职场文书
初婚未育未抱养证明
2014/01/12 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
本科应届生求职信
2014/08/05 职场文书
授权委托书公证
2014/09/14 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
Java8中Stream的一些神操作
2021/11/02 Java/Android