在视图模板中使用过滤器

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

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

  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.dwz.cn/26R4S5 中“使用过滤转换输出”第一页)。

在代码中使用过滤器

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

和普通的服务不同,过滤器在注入器中注册时,名称被加了一个后缀: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.dwz.cn/26R4S5 中“使用过滤转换输出”第二页)在控制器中注入了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.dwz.cn/26R4S5

angularJS之使用过滤器转化输出 (angularJS系列最后一篇)的更多相关文章

  1. 前端MVC学习总结——AngularJS验证、过滤器

    前端MVC学习总结--AngularJS验证.过滤器 目录 一.验证 二.过滤器 2.1.内置过滤器 2.1.1.在模板中使用过滤器 2.1.2.在脚本中调用过滤函数 2.2.自定义过滤器 三.指令( ...

  2. 再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

    这篇是对angularJS的一些疑点回顾,是对目前angularJS开发的各种常见问题的整理汇总.如果对文中的题目全部了然于胸,觉得对整个angular框架应该掌握的七七八八了.希望志同道合的通知补充 ...

  3. 你会用AngularJS,但你会写AngularJS文档么?

    你会用AngularJS,但你会写AngularJS文档么? 涉及知识:gulp javascript 我们经常在写代码的时候要求写好注释,方便日后维护.但其实注释还有一个重要的用途:生成API文档. ...

  4. SpringBoot系列教程web篇之过滤器Filter使用指南扩展篇

    前面一篇博文介绍了在 SpringBoot 中使用 Filter 的两种使用方式,这里介绍另外一种直接将 Filter 当做 Spring 的 Bean 来使用的方式,并且在这种使用方式下,Filte ...

  5. SpringBoot系列教程web篇之过滤器Filter使用指南

    web三大组件之一Filter,可以说是很多小伙伴学习java web时最早接触的知识点了,然而学得早不代表就用得多.基本上,如果不是让你从0到1写一个web应用(或者说即便从0到1写一个web应用) ...

  6. 【Windows编程】系列第三篇:文本字符输出

    上一篇我们展示了如何使用Windows SDK创建基本控件,本篇来讨论如何输出文本字符. 在使用Win32编程时,我们常常要输出文本到窗口上,Windows所有的文本字符或者图形输出都是通过图形设备接 ...

  7. angularjs源码分析之:angularjs执行流程

    angularjs用了快一个月了,最难的不是代码本身,而是学会怎么用angular的思路思考问题.其中涉及到很多概念,比如:directive,controller,service,compile,l ...

  8. Mysql高手系列 - 第10篇:常用的几十个函数详解,收藏慢慢看

    这是Mysql系列第10篇. 环境:mysql5.7.25,cmd命令中进行演示. MySQL 数值型函数 函数名称 作 用 abs 求绝对值 sqrt 求二次方根 mod 求余数 ceil 和 ce ...

  9. SpringBoot系列教程web篇Listener四种注册姿势

    java web三要素Filter, Servlet前面分别进行了介绍,接下来我们看一下Listener的相关知识点,本篇博文主要内容为SpringBoot环境下,如何自定义Listener并注册到s ...

随机推荐

  1. Ext,保存输入记录,并会提示输入

    Ext的ComboBox组件使用非常多,通过配置输入框可以被允许成为一个.并可以存储输入记录,记录提示的基础,然后进行再次进入,以提高的用户体验输入操作. 代码非常easy,基本操作,如以下: // ...

  2. Android docs4.3API

    查找在线课程,加速进入Android docs API,最主要的原因是网上加载js文件速度慢,另一种是装google字体缓慢! import java.io.BufferedReader; impor ...

  3. MEF初体验之十一:查询组合容器

    查询组合容器 组合容器暴露了几个get exports的重载方法和导出对象和对象集合.你需要注意下面的行为: 当请求单个对象实例时,如果未发现导出,一个异常将被抛出 当请求单个对象实例时,如果发现超过 ...

  4. Oracle 中用一个表的数据更新另一个表的数据

    Oracle 中用一个表的数据更新另一个表的数据 分类: SQL/PLSQL2012-05-04 15:49 4153人阅读 评论(1) 收藏 举报 oraclemergesubqueryinsert ...

  5. Behavioral模式之Observer模式

    1.意图 定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,全部依赖于它的对象都得到通知并被自己主动更新. 2.别名 依赖(dependents).公布-订阅(Publish-Subscr ...

  6. TestNg它@Factory详细解释------如何更改参数值测试

    原创文章,版权所有所有.转载,归因:http://blog.csdn.net/wanghantong TestNg的@Factory注解从字面意思上来讲就是採用工厂的方法来创建測试数据并配合完毕測试 ...

  7. 使用Eclipse设定Android开发环境

    使用Eclipse设定Android开发环境 花了大概几天的时间最终搭建好了开发Android的环境了! 我是使用Eclipse +ADT顺利地搭建Android开发环境的. 如今Google以及An ...

  8. 3D空间中的AABB(轴向平行包围盒, Aixe align bounding box)的求法

    引言 在前面的一篇文章中讲述了怎样通过模型的顶点来求的模型的包围球,而且还讲述了基本包围体除了包围球之外,还有AABB包围盒.在这一章,将讲述怎样依据模型的坐标求得它的AABB盒. 表示方法 AABB ...

  9. nettyclient异步获取数据

    源代码见,以下主要是做个重要代码记录 http://download.csdn.net/detail/json20080301/8180351 NETTYclient获取数据採用的方式是异步获取数据, ...

  10. spring framework 4 源代码阅读器(1) --- 事前准备

    在你开始看代码.的第一件事要做的就是下载代码. 这里:https://github.com/spring-projects/spring-framework 下载完整的使用发现gradle建立管理工具 ...