angularJS之使用过滤器转化输出 (angularJS系列最后一篇)
在视图模板中使用过滤器
过滤器也是一种服务,负责对输入的内容进行处理转换,以便更好地向用户显示。
过滤器可以在模板中的{{}}标记中使用:
- {{ 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}}
angularJS之使用过滤器转化输出 (angularJS系列最后一篇)的更多相关文章
- 前端MVC学习总结——AngularJS验证、过滤器
前端MVC学习总结--AngularJS验证.过滤器 目录 一.验证 二.过滤器 2.1.内置过滤器 2.1.1.在模板中使用过滤器 2.1.2.在脚本中调用过滤函数 2.2.自定义过滤器 三.指令( ...
- 再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结
这篇是对angularJS的一些疑点回顾,是对目前angularJS开发的各种常见问题的整理汇总.如果对文中的题目全部了然于胸,觉得对整个angular框架应该掌握的七七八八了.希望志同道合的通知补充 ...
- 你会用AngularJS,但你会写AngularJS文档么?
你会用AngularJS,但你会写AngularJS文档么? 涉及知识:gulp javascript 我们经常在写代码的时候要求写好注释,方便日后维护.但其实注释还有一个重要的用途:生成API文档. ...
- SpringBoot系列教程web篇之过滤器Filter使用指南扩展篇
前面一篇博文介绍了在 SpringBoot 中使用 Filter 的两种使用方式,这里介绍另外一种直接将 Filter 当做 Spring 的 Bean 来使用的方式,并且在这种使用方式下,Filte ...
- SpringBoot系列教程web篇之过滤器Filter使用指南
web三大组件之一Filter,可以说是很多小伙伴学习java web时最早接触的知识点了,然而学得早不代表就用得多.基本上,如果不是让你从0到1写一个web应用(或者说即便从0到1写一个web应用) ...
- 【Windows编程】系列第三篇:文本字符输出
上一篇我们展示了如何使用Windows SDK创建基本控件,本篇来讨论如何输出文本字符. 在使用Win32编程时,我们常常要输出文本到窗口上,Windows所有的文本字符或者图形输出都是通过图形设备接 ...
- angularjs源码分析之:angularjs执行流程
angularjs用了快一个月了,最难的不是代码本身,而是学会怎么用angular的思路思考问题.其中涉及到很多概念,比如:directive,controller,service,compile,l ...
- Mysql高手系列 - 第10篇:常用的几十个函数详解,收藏慢慢看
这是Mysql系列第10篇. 环境:mysql5.7.25,cmd命令中进行演示. MySQL 数值型函数 函数名称 作 用 abs 求绝对值 sqrt 求二次方根 mod 求余数 ceil 和 ce ...
- SpringBoot系列教程web篇Listener四种注册姿势
java web三要素Filter, Servlet前面分别进行了介绍,接下来我们看一下Listener的相关知识点,本篇博文主要内容为SpringBoot环境下,如何自定义Listener并注册到s ...
随机推荐
- Sublime Text 3 搭建Go开发环境(Windows)
一.安装GO 如果已经环境已经配置好,这一步省略.... 1.下载并安装go sdk 2.配置环境变量 (1). 新建 变量名:GOBIN 变量值 :F:\Go\bin (2). 新建 变量名:GOA ...
- 新手安装使用codeblocks
很多第一次使用codeblocks的新手总会遇到很多的问题,首先作为一名新手应该下一个完整版的codeblocks,下载地址链接: http://pan.baidu.com/s/1dDxKeD7 密码 ...
- 自己写CPU第五级(4)——逻辑、实现移动和空指令
我们会继续上传新书<自己写CPU>(未公布).今天是18片,我每星期试试4 5.5 改动OpenMIPS以实现逻辑.移位操作与空指令 为了实现逻辑.移位操作与空指令(当中nop.ssnop ...
- weighted Kernel k-means 加权核k均值算法理解及其实现(一)
那就从k-means开始吧 对于机器学习的新手小白来说,k-means算法应该都会接触到吧.传统的k-means算法是一个硬聚类(因为要指定k这个参数啦)算法.这里利用百度的解释 它是数据点到原型的某 ...
- swift 笔记 (十九) ——
协议
协议(Protocols) 协议仅是用定义某些任务或者是功能必须的方法和属性. 类似于java里的interface的作用.但协议并不会实现详细的功能. 我猜这个名字源于OO中提到的"契约& ...
- Qt on Android: Qt 5.3.0 公布,针对 Android 改进的说明
5月20日本,Qt 官方博客宣布 Qt 5.3.0 公布! 这个版本号聚焦在性能.稳定性和可用性的提升上,与 5.1 / 5.2 相比有非常大提升. 5.3.0 的主要变化: 稳定能.可用性大大提升 ...
- POJ 3280 间隔DP
字符串,每次插入或删除字符需要一定的价格,问:我怎样才能使这个字符串转换成字符串回文,花最少. 间隔DP 当DP到区间[i,j+1]时,我们能够在i-1的位置加入一个str[j+1]字符,或者将在j+ ...
- FutureTask解析(转)
站在使用者的角度,future是一个经常在多线程环境下使用的Runnable,使用它的好处有两个:1. 线程执行结果带有返回值2. 提供了一个线程超时的功能,超过超时时间抛出异常后返回. 那,怎么实现 ...
- shell脚本操作数据库
#!/bin/bash HOST_NAME="localhost" PORT=3306 USERNAME="root" PASSWORD="root& ...
- Java虚拟机类型卸载和类型更新解析(转)
转自:http://www.blogjava.net/zhuxing/archive/2008/07/24/217285.html [摘要] 前面系统讨论过java 类型加载(loa ...