angularjs 過濾器filter

      在前面介紹angularjs已經很多了，中途由於工作和一切生活瑣事，暫停了很久。今天在這里將繼續angularjs講解，這節我們來看看angularjs的過濾去filter。

      在我們開發中經常需要在頁面顯示給用戶的信息需要一定處理格式化，才能顯示給用戶。比如時間本地化，或者yyyy-MM-dd HH:mm:ss格式，數字精度格式化，本地化，人名格式化等等。在angularjs中為我們提供了叫filter的指令，讓我們能夠很輕易就能做到着一些列的功能，angularjs內部為我們提供了number等很多內置的filter。並且我們能夠很輕易的自定義自己的領域filter。

      如下實例：

html:

 
           1  
          < 
          div  
          ng-app 
          ="app" 
           ng-controller 
          ="test" 
          > 
          
 
           2 num: 
          < 
          input  
          ng-model 
          ="num" 
            
          /> 
          
 
           3  
          < 
          br 
          /> 
          
 
           4 {{num | number}} 
          
 
           5  
          < 
          br 
          /> 
          
 
           6 {{num | number:2}} 
          
 
           7  
          < 
          br 
          /> 
          
 
           8 first name: 
          < 
          input  
          ng-model 
          ="person.first" 
          /> 
          
 
           9  
          < 
          br 
          /> 
          
 
          10 last name: 
          < 
          input  
          ng-model 
          ="person.last" 
          /> 
          
 
          11  
          < 
          br 
          /> 
          
 
          12 name: {{person | fullname}} 
          
 
          13      
          < 
          br 
          /> 
          
 
          14 name: {{person | fullname:"- -"}} 
          
 
          15         
          < 
          br 
          /> 
          
 
          16 name: {{person | fullname:" " | uppercase }} 
          
 
          17  
          </ 
          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/9/

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

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