Angularjs中使用Filters详解

Filter作用就是接收一个输入，通过某个规则进行处理，然后给用户返回处理后的结果。Filter可以用在模板、控制器、或者服务，同时也会很容易自定义一个Filter过滤器。

在模板中使用Filter

Filter可以用于在视图模板中使用一下语法表达式：

{{ expression | filter }}

例如：格式{{ 12 | currency }}是使用currency的filter用法，让数字12过滤为货币形式，结果是$12.00。

Filter可以应用到另一个过滤的结果中。这就是所谓的“chaining”，使用语法如下：

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

Filter中可能需要参数。语法为：

{{ expression | filter:argument1:argument2:... }}

例如：格式{{ 1234 | number:2 }}是使用number的filter用法，将数字1234过滤为有两位小数点的数字，结果为：1,234.00 。

在controller、services、directives中使用filter

 你可以在controller、services、directives中使用filter。

为此，你需要将依赖项名称注入到你的controller/service/directive中：filter；例如：一个过滤器是number，你就需要通过使用依赖注入numberFilter。注入的参数是一个函数，该函数将值作为第一个参数，然后用第二个参数来筛选参数。

下面的例子使用了叫做filter的Filter过滤器。这个filter可以在sub arrays的基础上减少arrays。也可以应用在视图模板的标记，就像：{{ctrl.array|filter:'a'}}，这将为‘a'做一个全文搜索。然而，在视图模板中使用filter将会重新对每一个filter过滤，如果数组比较大的会是加载多次的。

因此下面的例子直接调用在控制器中的filter。通过这个，控制器可以在需要是调用filter（例如：当后端数据加载时或者filter的表达式改变时）。

index.html:

<div ng-controller="FilterController as ctrl"> <div>  All entries:  <span ng-repeat="entry in ctrl.array">{{entry.name}} </span> </div> <div>  Entries that contain an "a":  <span ng-repeat="entry in ctrl.filteredArray">{{entry.name}} </span> </div></div> 

script.js:

angular.module('FilterInControllerModule', []).controller('FilterController', ['filterFilter', function(filterFilter) { this.array = [  {name: 'Tobias'},  {name: 'Jeff'},  {name: 'Brian'},  {name: 'Igor'},  {name: 'James'},  {name: 'Brad'} ]; this.filteredArray = filterFilter(this.array, 'a');}]);

结果为：

All entries: Tobias Jeff Brian Igor James BradEntries that contain an "a": Tobias Brian James Brad

创建自定义filters：

编写自己的filter是非常简单的：只需要在你的模块中注册一个新的filter factory函数。在内部，这里用了filterProvider。这个factory函数应该返回一个新的filter函数并且将输入值作为第一个参数。任何过滤器参数都会作为附加参数传递到过滤器函数中。