详解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 相关文章推荐
解决jquery .ajax 在IE下卡死问题的解决方法
Oct 26 Javascript
js操作ajax返回的json的注意问题!
Feb 23 Javascript
推荐10个超棒的jQuery工具提示插件
Oct 11 Javascript
在网站上应该用的30个jQuery插件整理
Nov 03 Javascript
jQuery中live()方法用法实例
Jan 19 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
Jun 13 Javascript
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
JS实现点击按钮可实现编辑功能
Jul 03 Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 Javascript
js实现同一个页面,多个enter事件绑定的示例
Oct 10 Javascript
JS简单数组排序操作示例【sort方法】
May 17 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
留言板翻页的实现详解
2006/10/09 PHP
php学习之运算符相关概念
2011/06/09 PHP
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
PHP asXML()函数讲解
2019/02/03 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
js 鼠标拖动对象 可让任何div实现拖动效果
2009/11/09 Javascript
JS实现文字向下滚动完整实例
2015/02/06 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
JavaScript获取服务器端时间的方法
2016/11/29 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
Vue.js中兄弟组件之间互相传值实例
2017/06/01 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
node后端服务保活的实现
2019/11/10 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
python使用Tkinter显示网络图片的方法
2015/04/24 Python
numpy.linspace函数具体使用详解
2019/05/27 Python
pyqt5移动鼠标显示坐标的方法
2019/06/21 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
英国优质家居用品网上品牌:URBANARA
2018/06/01 全球购物
加拿大领先家居家具网上购物:Aosom.ca
2020/05/27 全球购物
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
工作岗位说明书模板
2014/05/09 职场文书
银行奉献演讲稿
2014/09/16 职场文书
延安红色之旅心得体会
2014/10/07 职场文书
2014年化工厂工作总结
2014/11/25 职场文书
停车场管理制度范本
2015/08/05 职场文书
《认识年月日》教学反思
2016/02/19 职场文书