angularjs 過濾器filter

      在前面介紹angularjs已經不少了，中途因爲工做和一切生活雜事，暫停了好久。今天在這裏將繼續angularjs講解，這節咱們來看看angularjs的過濾去filter。

      在咱們開發中常常須要在頁面顯示給用戶的信息須要必定處理格式化，才能顯示給用戶。好比時間本地化，或者yyyy-MM-dd HH:mm:ss格式，數字精度格式化，本地化，人名格式化等等。在angularjs中爲咱們提供了叫filter的指令，讓咱們可以很輕易就能作到着一些列的功能，angularjs內部爲咱們提供了number等不少內置的filter。而且咱們可以很輕易的自定義本身的領域filter。

      以下實例：

html:

<div ng-app="app" ng-controller="test">
num:<input ng-model="num" />
<br/>
{{num | number}}
<br/>
{{num | number:2}}
<br/>
first name:<input ng-model="person.first"/>
<br/>
last name:<input ng-model="person.last"/>
<br/>
name: {{person | fullname}}
    <br/>
name: {{person | fullname:"- -"}}
       <br/>
name: {{person | fullname:" " | uppercase }}
</div>​

js:

function test($scope) {

}
angular.module("app", []).controller("test", test).
filter("fullname", function() {
    var filterfun = function(person, sep) {
        sep = sep || " ";
        person = person || {};
        person.first = person.first || "";
        person.last = person.last || "";
        return person.first + sep + person.last;
    };
    return filterfun;
});​

jsfiddle效果：http://jsfiddle.net/whitewolf/uCPPK/12/

 

 

     在實例中首先演示了angularjs自帶的number的filter使用。再一樣爲咱們樣式瞭如何去建立一個angularjs的filter。其實現很簡單.angularjs使得擴展一切變得天然

     最後說明：filters支持鏈式寫法，如何powershell或者其餘操做系統外殼語言同樣的管道式模型，形如 value | filter1 | filter2。