详解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 相关文章推荐
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
js随机颜色代码的多种实现方式
Apr 23 Javascript
js中onload与onunload的使用示例
Aug 25 Javascript
js中的replace方法使用介绍
Oct 28 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
javascript属性访问表达式用法分析
Apr 25 Javascript
Canvas + JavaScript 制作图片粒子效果
Feb 08 Javascript
javascript中undefined的本质解析
Jul 31 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
原生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
谈谈PHP语法(5)
2006/10/09 PHP
PHP脚本的10个技巧(1)
2006/10/09 PHP
php.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
javascript各种复制代码收集
2008/09/20 Javascript
Discuz! 6.1_jQuery兼容问题
2008/09/23 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
JS中递归函数
2016/06/17 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
如何换个角度使用VUE过滤器详解
2019/09/11 Javascript
Vue Extends 扩展选项用法完整实例
2019/09/17 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
python 输出所有大小写字母的方法
2019/01/02 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
python_array[0][0]与array[0,0]的区别详解
2020/02/18 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
adidas泰国官网:adidas TH
2020/07/11 全球购物
酒店管理专业学生求职信
2013/09/27 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
单位授权委托书范文
2014/08/02 职场文书
2014年个人售房协议书
2014/10/30 职场文书
2014个人年终工作总结范文
2014/12/15 职场文书
高中信息技术教学反思
2016/02/16 职场文书
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android