AngularJS过滤器是用来格式化输出数据的。除了格式化数据，过滤器还能修改DOM。这使得过滤器通常用来做些如“适时的给输出加入CSS样式”等工作。

比如，你可能有些数据在输出之前需要根据进行本地化。你可以向下面这样使用链式的过滤器来传递表达式：

name | uppercase

这个表达式执行时会将name的值传递给uppercase过滤器。

写一个你自己的过滤器非常容易：在你的模块中注册一个新的过滤器（可注入的）工厂函数就行了。这个工厂函数必须返回一个新的过滤器函数，这个过滤函数的第一个参数接受的是输入。任何过滤器参数都会被当成附加的参数传递给过滤器。

下面的例子展示了逆转字符串文本。另外，它有条件地将文本大写。

<!doctype html>

<html ng-app="MyReverseModule">

  <head>

    <script src="http://code.angularjs.org/angular-1.0.2.min.js"></script>

    <script src="script.js"></script>

  </head>

  <body>

    <div ng-controller="Ctrl">

      <input ng-model="greeting" type="greeting"><br>

      No filter: {{greeting}}<br>

      Reverse: {{greeting|reverse}}<br>

      Reverse + uppercase: {{greeting|reverse:true}}<br>

    </div>

  </body>

</html>

script.js:

angular.module('MyReverseModule', []).

  filter('reverse', function() {

    return function(input, uppercase) {

      var out = "";

      for (var i = 0; i < input.length; i++) {

        out = input.charAt(i) + out;

      }

      // conditional based on optional argument

      if (uppercase) {

        out = out.toUpperCase();

      }

      return out;

    }

  });

function Ctrl($scope) {

  $scope.greeting = 'hello';

}

过滤器可用在任何api或者ng.$rootScoe.Scope的执行过程中，不过一般用来格式化绑定在模板中的表达式。

{{ expression | filter }}

过滤器一般在处理过程中将数据转变成新的格式。它能使用链式风格，还能接受附加参数。

你可以像下面这样使用链式风格：

{{ expression | filter1 | filter2 }}

你也可以使用“:”来传递额外的参数给过滤器，比如，将数字123格式化成带有2位小数的形式：

123 | number:2

下面有些例子，展示了使用不同过滤器格式化之前和之后的样子：

  • 无过滤器: {{1234.5678}} => 1234.5678
  • 数字过滤器: {{1234.5678|number}} => 1,234.57. 注意"，"号和四舍五入后的后两位。
  • 带参数的过滤器: {{1234.5678|number:5}} => 1,234.56780. 过滤器可以接受额外的参数，参数写在“:”的后面。比如，number过滤器接受数值型参数来制定需要展示几位小数。

加油！

AngularJS开发指南13：AngularJS的过滤器详解的更多相关文章

  1. AngularJS开发指南4：指令的详解

    指令是我们用来扩展浏览器能力的技术之一.在DOM编译期间,和HTML元素关联着的指令会被检测到,并且被执行.这使得指令可以为DOM指定行为,或者改变它. AngularJS有一套完整的.可扩展的.用来 ...

  2. 移动IM开发指南2：心跳指令详解

    <移动IM开发指南>系列文章将会介绍一个IM APP的方方面面,包括技术选型.登陆优化等.此外,本文作者会结合他在网易云信多年iOS IM SDK开发的经验,深度分析实际开发中的各种常见问 ...

  3. MVC过滤器详解

    MVC过滤器详解   APS.NET MVC中(以下简称"MVC")的每一个请求,都会分配给相应的控制器和对应的行为方法去处理,而在这些处理的前前后后如果想再加一些额外的逻辑处理. ...

  4. Asp.Net MVC学习总结之过滤器详解（转载）

    来源:http://www.php.cn/csharp-article-359736.html   一.过滤器简介 1.1.理解什么是过滤器 1.过滤器(Filters)就是向请求处理管道中注入额外的 ...

  5. [ 转载 ] Java开发中的23种设计模式详解(转)

    Java开发中的23种设计模式详解(转)   设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类 ...

  6. 最锋利的Visual Studio Web开发工具扩展：Web Essentials详解

    原文:最锋利的Visual Studio Web开发工具扩展:Web Essentials详解 Web Essentials是目前为止见过的最好用的VS扩展工具了,具体功能请待我一一道来. 首先,从E ...

  7. js课程 1-3 Javascript变量类型详解

    js课程 1-3  Javascript变量类型详解 一.总结 一句话总结:js对象点(属性方法),json对象冒号(属性方法).属性和方法区别只有一个括号. 1.json对象中的函数的使用? 函数名 ...

  8. Wireshark过滤器详解

    Wireshark过滤器详解 1.Wireshark主要提供两种主要的过滤器 捕获过滤器:当进行数据包捕获时,只有那些满足给定的包含/排除表达式的数据包会被捕获 显示过滤器:该过滤器根据指定的表达式用 ...

  9. AngularJS开发指南16：AngularJS构建大型Web应用详解

    AngularJS是由Google创建的一种JS框架,使用它可以扩展应用程序中的HTML功能,从而在web应用程序中使用HTML声明动态内容.在该团队工作的软件工程师Brian Ford近日撰写了一篇 ...

随机推荐

  1. css中元素居中总结

    很多时候,我们需要让元素居中显示:1. 一段文本的水平居中,2. 一张图片的水平居中,3. 一个块级元素的水平居中:4. 单行文本的竖直居中,5. 不确定高度的一段文本竖直居中,6. 确定高度的块级元 ...

  2. 软件工程实训项目案例--Android移动应用开发

    实训过程 角色分工 1.项目经理:负责项目的组织实施,制定项目计划,并进行跟踪管理 2.开发人员:对项目经理及项目负责 3.需求分析员:负责系统的需求获取和分析,并协助设计人员进行系统设计 4.系统设 ...

  3. bzoj-3444 3444: 最后的晚餐(组合数学)

    题目链接: 3444: 最后的晚餐 Time Limit: 5 Sec  Memory Limit: 128 MB Description [问题背景] 高三的学长们就要离开学校,各奔东西了.某班n人 ...

  4. 第24章 SEH结构化异常处理_异常处理及软件异常

    24.1  程序的结构 (1)try/except框架 __try{ //被保护的代码块 …… } __except(except fileter/*异常过滤程序*/){ //异常处理程序 } (2) ...

  5. Linux下安装使用NMON监控、分析系统性能

    背景:今天在LoadRunner11.0中使用rstat监控linux过程中,始终提示如下错: Monitor name :UNIX Resources. Cannot initialize the ...

  6. java14-4 Pattern和Matcher类的使用

     获取功能  Pattern和Matcher类的使用  模式和匹配器的基本使用顺序 import java.util.regex.Matcher; import java.util.regex.Pat ...

  7. ant 自动构建血泪史

    1.  android.bat update project -p . -t xxx 其中: xxx 为 targetid 特别注意的是:  targetid 不等于 API Level.... 2. ...

  8. smarty中section遍历数组

    smarty中section遍历数组

  9. openstack中彻底删除计算节点的操作记录

    在使用openstack的过程中,我们经常会添加好几台计算节点来部署虚拟机,在后续使用中由于某些原因,一些计算节点出现了问题,需要将这些出了问题的计算节点从openstack的控制节点中踢出去!但是很 ...

  10. EasyUI概述

    EasyUI是基于jQuery的一套UI框架,主要应用场景是后台管理系统的UI开发. 其提供了以下几个模块的插件 1.布局 2.菜单与按钮 3.表单 4.窗口 可以让开发人员,特别是后端开发人员,在不 ...