详解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 相关文章推荐
兼容Mozilla必须知道的知识。
Jan 09 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
Apr 27 Javascript
关于 文本框默认值 的操作js代码
Jan 12 Javascript
JavaScript实现自动消除按钮功能的方法
Aug 05 Javascript
javascript常用经典算法实例详解
Nov 25 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
微信小程序 Flex布局详解
Oct 09 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 Javascript
Angular整合zTree的示例代码
Jan 24 Javascript
详解Axios统一错误处理与后置
Sep 26 Javascript
webpack4之如何编写loader的方法步骤
Jun 06 Javascript
JavaScript实现滚动加载更多
Dec 27 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
在Linux系统的服务器上隐藏PHP版本号的方法
2015/06/06 PHP
php基于curl主动推送最新内容给百度收录的方法
2016/10/14 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
简单的js分页脚本
2009/05/21 Javascript
xml 封装与解析(javascript和C#中)
2009/07/26 Javascript
JSON 教程 json入门学习笔记
2020/09/22 Javascript
js鼠标左右键 键盘值小结
2010/06/11 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
2011/10/09 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
js性能优化技巧
2015/11/29 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
jQuery弹出层插件popShow(改进版)用法示例
2017/01/23 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
angular 服务随记小结
2019/05/06 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
python正则表达式抓取成语网站
2013/11/20 Python
python命令行参数sys.argv使用示例
2014/01/28 Python
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
Django之form组件自动校验数据实现
2020/01/14 Python
使用卷积神经网络(CNN)做人脸识别的示例代码
2020/03/27 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
营销总监岗位职责范本
2014/02/26 职场文书
2014年党员公开承诺践诺书
2014/03/25 职场文书
《赠汪伦》教学反思
2014/04/12 职场文书
2014年政务公开工作总结
2014/12/09 职场文书
MySql开发之自动同步表结构
2021/05/28 MySQL