你的第一個過濾器

過濾器是一種特殊型別的函式，可以修改某些內容列印到頁面的方式，或者可以用於過濾陣列或 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 過濾器僅作為一個演示輕鬆地炫耀過濾器是怎樣工作的，但你並不需要建立自己的大寫功能。