码迷,mamicode.com
首页 > Web开发 > 详细

angularJS之使用过滤器转化输出 (angularJS系列最后一篇)

时间:2015-03-20 10:39:06      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:

在视图模板中使用过滤器

过滤器也是一种服务,负责对输入的内容进行处理转换,以便更好地向用户显示。

过滤器可以在模板中的{{}}标记中使用:

  1. {{ expression | filter:arg1:arg2}}
  • 预置的过滤器

AngularJS的ng模块实现了一些预置的过滤器,如:currency、number等等,可以直接 使用。例如下面的示例将对数字12使用currency过滤器,结果将是"$12.00":

  1. {{12|currency}}
  • 带参数的过滤器

过滤器也可以有参数,例如下面的示例将数字格式化为"1,234.00":

  1. {{1234|number:2}}
  • 过滤器流水线

过滤器可以应用于另一个过滤器的输出,就像流水线,语法如下:

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

使用过滤器的示例(http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/ 中“使用过滤转换输出”第一页)。

在代码中使用过滤器

别忘了过滤器也是一种服务,所以你可以将它注入你的代码中。

和普通的服务不同,过滤器在注入器中注册时,名称被加了一个后缀:Filter。 例如,number过滤器的服务名称是:numberFilter,而currency过滤器的服务名称是: currencyFilter。

通常我们的代码被封装在三个地方:控制器、服务、指令。这些地方都支持服务的直接 注入,例如:

  1. angular.module(‘myModule‘,[])
  2. .controller(function($scope,numberFilter){
  3. //...
  4. })

有时你需要显式的通过注入器调用过滤器,那么使用注入器的invoke()方法:

  1. angular.injector([‘ng‘])
  2. .invoke(function(numberFilter){
  3. //...
  4. })

总之,记住过滤器是一种服务,除了名字需要追加Filter后缀,和其他服务的调用方法没 什么区别。

示例(http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/ 中“使用过滤转换输出”第二页)在控制器中注入了number和currency过滤器,实现对total的格式化。

创建过滤器

和指令类似,过滤器也是一种特殊的服务,与创建一个普通的服务相比较:

  1. 必须使用模块的filter()接口注册服务
  2. 必须提供对象工厂/factory方法
  3. 对象工程必须返回一个过滤器函数,其第一个参数为输入变量
  1. //定义过滤器类工厂
  2. var filterFactory = function(){
  3. //定义过滤器函数
  4. var filter = function(input,extra_args){
  5. //process input and generate output
  6. return output
  7. }
  8. };
  9. //在模块上注册过滤器
  10. angular.module("someModule",[])
  11. .filter("filterName",filterFactory);

为过滤器增加参数

过滤器的行为可以通过额外的参数来调整。比如,我们希望改进上一节的示例,使其可以 支持仅大写每个单词的首字母。

  • 实现

通过在过滤器类工厂返回的过滤器函数中传入额外的参数,就可以实现这个功能。

  1. var filter = function(input,argument1,argument2){...}
  • 使用

在使用过滤器时,额外的参数通过前缀:引入,比如

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

参考资料:http://www.hubwiz.com

angularJS之使用过滤器转化输出 (angularJS系列最后一篇)

标签:

原文地址:http://www.cnblogs.com/xuema/p/4352832.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!