文章目录

1. 1. filter是什么？
2. 2. 用在模板里
3. 3. 用在controller和services里面
4. 4. 创建我们自己的filter
5. 5. 结语

这篇文章简要介绍下filter的使用

filter是什么？

filter顾名思义就是过滤器，可以对当前表达式的结果值进行处理，如果熟悉linux管道概念的用户，应该可以很好的理解这个概念。filter可以用在anjular的模板(template)里，控制器(controllers)里，或者服务(services)里。

用在模板里

试想下这样的需求，需要对价格这些数据进行保留两位数的操作。这在angular里面很容易就能实现：

{{ 1234 | number:2 }}

结果是1,234.00.
number就是一个filter。用来将一个数字组织成字符串。后面跟的是filter的参数，这边就是说后面保留两位小数。

filter支持‘链式操作’，就是前面一个操作的结果可以作为下面一个filter的输入参数。

所以我们可以这样

{{ expression | filter1 | filter2 | ... }}

用在controller和services里面

比如上面的保留两位小数的filter我们可以在controller里使用：
猛戳这边试一下

html：

<div ng-app="FilterInControllerModule">
  <div ng-controller="FilterController">
    
    <div>     
      <span >{{value}} </span>
    </div>
      <div>     
      <span >{{filterValue}} </span>
    </div>
  </div>
</div>

js:

angular.module('FilterInControllerModule', []).
  controller('FilterController', ['$scope','numberFilter', function($scope,numberFilter) {
    $scope.value = '1112345';
    $scope.filterValue = numberFilter($scope.value, 2);
  }]);

创建我们自己的filter

官方提供的filter还是太少，我们可以自己封装一些,怎么弄呢？很简单，先看个实现例子：
猛戳这边试一下

html

<div ng-app="MyReverseModule">
  <div ng-controller="Ctrl">
    
    No filter: {{greeting}}<br>
    Reverse: {{greeting|reverse}}<br>
  </div>
</div>

js:

angular.module('MyReverseModule', []).
  filter('reverse', function() {
    return function(input) {
      var out = "";
      for (var i = 0; i < input.length; i++) {
        out = input.charAt(i) + out;
      }
      return out;
    }
  });

function Ctrl($scope) {
  $scope.greeting = 'hello';
}

结果为：
No filter: hello
Reverse: olleh

简单介绍下。我们可以使用filter方法，在当前模块上创建一个filter。

filter（filtername，function(){
    return filterFn
}）

其中filtername就是我们的过滤器的名字，需要返回一个函数filterFn，给angular调用。返回的函数会被注入，输入参数。
看下我们的filterFn：

function(input) {
      var out = "";
      for (var i = 0; i < input.length; i++) {
        out = input.charAt(i) + out;
      }
      return out;
    }

很简单，拿到输入的参数，这边就是模板里输入的greeting的值也就是hello。之后翻转后 return新的值。

结语

结语还是要滴，虽然，这个比较简单。但是功能还是很强大的，必须注意的是，模板filter不要做大多太杂的处理，可以使用controller的调用方式。如果实在太大，就该考虑使用新建service模块的方式了。