23. 创建Angular的过滤器

http://docs.angularjs.org/guide/dev_guide.templates.filters.creating_filters

创建你自己的filter非常简单：只需要向你的module中注册一个新的filter factory函数即可。在factory中返回一个函数，它的第一个参数是输入的值，后面其它的参数，是在调用该filter时可向它传入的其它参数。

（anguljarjs中最简单的就是这个filter了）

下面定义了一个filter，可以把一段文本内容颠倒。同时它还能接受一个“将文本转为大写”的参数。

源代码

index.html

<!doctype html>
<html ng-app="MyReverseModule">
  <head>
    <script src="http://code.angularjs.org/angular-1.0.1.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';
}

**End to end test**

it('should reverse greeting', function() {
  expect(binding('greeting|reverse')).toEqual('olleh');
  input('greeting').enter('ABC');
  expect(binding('greeting|reverse')).toEqual('CBA');
});

jsfiddle demo

(2013-01-01) 23. 创建Angular的过滤器

源代码