你的第一個過濾器

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