angularJS之使用过滤器转化输出 (angularJS系列最后一篇)
2015-03-20 09:25
555 查看
在视图模板中使用过滤器
过滤器也是一种服务,负责对输入的内容进行处理转换,以便更好地向用户显示。过滤器可以在模板中的{{}}标记中使用:
{{ expression | filter:arg1:arg2}}
预置的过滤器
AngularJS的ng模块实现了一些预置的过滤器,如:currency、number等等,可以直接 使用。例如下面的示例将对数字12使用currency过滤器,结果将是"$12.00":
{{12|currency}}
带参数的过滤器
过滤器也可以有参数,例如下面的示例将数字格式化为"1,234.00":
{{1234|number:2}}
过滤器流水线
过滤器可以应用于另一个过滤器的输出,就像流水线,语法如下:
{{expression|filter1|filter2|...}}
使用过滤器的示例(http://***/course/54f3ba65e564e50cfccbad4b/ 中“使用过滤转换输出”第一页)。
在代码中使用过滤器
别忘了过滤器也是一种服务,所以你可以将它注入你的代码中。和普通的服务不同,过滤器在注入器中注册时,名称被加了一个后缀:Filter。 例如,number过滤器的服务名称是:numberFilter,而currency过滤器的服务名称是: currencyFilter。
通常我们的代码被封装在三个地方:控制器、服务、指令。这些地方都支持服务的直接 注入,例如:
angular.module('myModule',[])
.controller(function($scope,numberFilter){
//...
})
有时你需要显式的通过注入器调用过滤器,那么使用注入器的invoke()方法:
angular.injector(['ng'])
.invoke(function(numberFilter){
//...
})
总之,记住过滤器是一种服务,除了名字需要追加Filter后缀,和其他服务的调用方法没 什么区别。
示例(http://***/course/54f3ba65e564e50cfccbad4b/ 中“使用过滤转换输出”第二页)在控制器中注入了number和currency过滤器,实现对total的格式化。
创建过滤器
和指令类似,过滤器也是一种特殊的服务,与创建一个普通的服务相比较:必须使用模块的filter()接口注册服务
必须提供对象工厂/factory方法
对象工程必须返回一个过滤器函数,其第一个参数为输入变量
//定义过滤器类工厂
var filterFactory = function(){
//定义过滤器函数
var filter = function(input,extra_args){
//process input and generate output
return output
}
};
//在模块上注册过滤器
angular.module("someModule",[])
.filter("filterName",filterFactory);
为过滤器增加参数
过滤器的行为可以通过额外的参数来调整。比如,我们希望改进上一节的示例,使其可以 支持仅大写每个单词的首字母。实现
通过在过滤器类工厂返回的过滤器函数中传入额外的参数,就可以实现这个功能。
var filter = function(input,argument1,argument2){...}
使用
在使用过滤器时,额外的参数通过前缀:引入,比如
{{expression|filter:argument1:argument2}}
参考资料:http://***
相关文章推荐
- 使用Vue构建Ionic混合APP系列教程最后一篇(五):使用Vue CLI编译最终的Cordova应用
- Biztalk Sql Adapter 系列一:使用biztalk Sql Adapter 读取数据(源码在文章最后)
- 2010最后一篇:使用PyQt4开发的一个开源小程序QaoBa
- 系统日志处理系列 (一)如何使用logging、commons-logging、log4j输出日志
- EF5+MVC4系列(9) Razor视图引擎的核心原理;@符号的使用;输出html的转义
- python 使用切片,每次输出都把 位于最后的一个字符砍掉
- 在Module中使用自定义过滤器,来统一对站内所有请求响应的输出内容进行采集或更改。
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(18)-过滤器的使用和批量删除数据(伪删除和直接删除)
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(18)-过滤器的使用和批量删除数据(伪删除和直接删除)
- 雅虎面试题─把十进制数(long型)分别以二进制和十六进制形式输出,不能使用printf系列
- 134 编程实现:把十进制数(long 型)分别以二进制和十六进制形式输出,不能使用 printf系列
- 使用过滤器过滤asp.net mvc输出内容
- 不使用printf系列库函数,将十进制数以十六进制数形式输出
- 把十进制数(long型)分别以二进制和十六进制形式输出,不使用printf系列库函数
- 系统日志处理系列 (一)如何使用logging、commons-logging、log4j输出日志
- 把十进制数(long型)分别以二进制和十六进制形式输出,不使用printf系列库函数
- 雅虎面试题─把十进制数(long型)分别以二进制和十六进制形式输出,不能使用printf系列
- [原创]FineUI秘密花园(三十) — ViewState与XState (本系列文章最后一篇,兑现承诺,现提供完整PDF版下载!)
- angularJS自定义过滤器使用
- 使用angularjs 去掉字符串最后的几个字符,从而实现trim的操作