你的第一个过滤器

过滤器是一种特殊类型的函数，可以修改某些内容打印到页面的方式，或者可以用于过滤数组或 ng-repeat 操作。你可以通过调用 app.filter() 方法创建过滤器，并为其传递名称和函数。有关语法的详细信息，请参阅以下示例。

例如，让我们创建一个过滤器，将一个字符串更改为全部大写（基本上是 .toUpperCase() javascript 函数的包装器）：

var app = angular.module("MyApp", []);

// just like making a controller, you must give the
// filter a unique name, in this case "toUppercase"
app.filter('toUppercase', function(){
    // all the filter does is return a function,
    // which acts as the "filtering" function
    return function(rawString){
        // The filter function takes in the value,
        // which we modify in some way, then return
        // back.
        return rawString.toUpperCase();
    };
}); 

让我们仔细看看上面发生的事情。

首先，我们创建一个名为 toUppercase 的过滤器，它就像一个控制器; app.filter(...)。然后，该过滤器的函数返回实际的过滤器函数。该函数接受一个对象，即要过滤的对象，并应返回该对象的过滤版本。

注意： 在这种情况下，我们假设传递给过滤器的对象是一个字符串，因此知道总是只对字符串使用过滤器。话虽这么说，可以对过滤器进行进一步改进，循环遍历对象（如果它是一个数组），然后使每个元素都是一个字符串大写。

现在让我们使用我们的新过滤器。我们的过滤器可以以两种方式使用，可以是角度模板，也可以是 javascript 函数（作为注入的 Angular 引用）。

使用 Javascript

只需将角度 $filter 对象注入控制器，然后使用它来使用其名称检索过滤器功能。

app.controller("MyController", function($scope, $filter){
    this.rawString = "Foo";
    this.capsString = $filter("toUppercase")(this.rawString);
});

HTML

对于 angular 指令，请在实际字符串后面的指令中使用 pipe（|）符号，后跟过滤器名称。例如，假设我们有一个名为 MyController 的控制器，它有一个名为 rawString 的字符串作为它的元素。

<div ng-controller="MyController as ctrl">
    <span>Capital rawString: {{ ctrl.rawString | toUppercase }}</span>
</div>

编者按： 角有很多内置的过滤器，包括大写，和 toUppercase 过滤器仅作为一个演示轻松地炫耀过滤器是怎样工作的，但你并不需要建立自己的大写功能。