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

水电工888

在视图模板中使用过滤器
　　过滤器也是一种服务，负责对输入的内容进行处理转换，以便更好地向用户显示。
　　过滤器可以在模板中的{{}}标记中使用：

• {{ expression | filter:arg1:arg2}}
  

• 预置的过滤器
  

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

• {{12|currency}}
  

• 带参数的过滤器
  

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

• {{1234|number:2}}
  

• 过滤器流水线
  

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

• {{expression|filter1|filter2|...}}
  

　　使用过滤器的示例（http://www.dwz.cn/26R4S5 中“使用过滤转换输出”第一页）。
在代码中使用过滤器
　　别忘了过滤器也是一种服务，所以你可以将它注入你的代码中。
　　和普通的服务不同，过滤器在注入器中注册时，名称被加了一个后缀：Filter。 例如，number过滤器的服务名称是：numberFilter，而currency过滤器的服务名称是： currencyFilter。
　　通常我们的代码被封装在三个地方：控制器、服务、指令。这些地方都支持服务的直接 注入，例如：

• angular.module('myModule',[])
  
• .controller(function($scope,numberFilter){
  
• //...
  
• })
  

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

• angular.injector(['ng'])
  
• .invoke(function(numberFilter){
  
• //...
  
• })
  

　　总之，记住过滤器是一种服务，除了名字需要追加Filter后缀，和其他服务的调用方法没 什么区别。
　　示例（http://www.dwz.cn/26R4S5 中“使用过滤转换输出”第二页）在控制器中注入了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://www.dwz.cn/26R4S5