AngularJS开发指南23：理解AngularJS过滤器-前端撸码笔记

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开发指南23：理解AngularJS过滤器

内容推荐