AangularJS過濾器詳解

標籤：年齡   span   cti   通過   sda   font   自己   本質   個數   

（參考angular權威指南）

過濾器：   用來格式化需要展示給使用者的資料；

　　使用過濾器的方式： 

　　　　(1)$scope.name=$filter("lowercase").("Ariarme");

　　　　(2)以HTML形式使用過濾器：如果傳遞參數只要在過濾器名字後面加冒號，有多個參數，可以在每個參數後面都加入冒號；

　　　　　　　　{{123.456789 | number:2}}  限制小數點的位元-----顯示為123.46（四捨五入）

           (3)用 | 符號作為分隔字元來同時使用多個過濾器；

 　　AngularJS提供的內建過濾器：

　　　　　currency ： 將一個數值格式化為貨幣格式，用{{123 | currency}}  將123轉化成貨幣格式；

　　　　　　　　　　　它允許我們自己設定貨幣符號：如  {{123 | currency : "￥"}} 顯示為￥123.00.00；

               date: 可以將日期格式化成需要的格式；

                       內建的支援本地化的日期格式：

                          {{today | date ‘medium‘}}   Aug 09,2014 9:45:08 AM

　　　　　　　　　{{today | date ‘short‘}}       8/9/14 9:45AM

　　　　　　　　　{{today | date ‘fullDate‘}}   Thursday,August 09,2014

　　　　　　　　　{{today | date ‘longDate‘}}   August 09,2014

　　　　　　　　　{{today | date ‘mediumDate‘}}   Aug 09,2014

　　　　　　　　　{{today | date ‘shorDate‘}}     8/9/14

　　　　　　　　　{{today | date ‘mediumTime‘}}   9:45:08 AM

　　　　　　　　　{{today | date ‘shortTime‘}}       9:45 AM;

　　　　　　　　年份格式化：

                          四位年份：{{today | date ‘yyyy’}}  2017

　　　　　　　　　兩位年份：{{today | date ‘yy‘}}     17

　　　　　　　　　一位年份：{{today | date ‘y‘}}  2017

　　　　　　　　月份格式化：

　　　　　　　　　英文月份：{{taday |date:‘MMMM‘}} August

　　　　　　　　　英文月份j簡寫 {{taday |date:‘MMM‘}} Aug

　　　　　　　　　數字月份：{{taday |date:‘MM‘}}  08

　　　　　　　　　一個月中第幾個月份：：{{taday |date:‘M‘}}  8

　　　　　　　  日期格式化：

　　　　　　　　　數字日期：{{today | date:‘dd‘}}  22

　　　　　　　　　一個月中的第幾天：{{today | date:‘d‘}} 22

                         英文星期： {{today | date:‘EEEE‘}} Thrusday

                         英文星期簡寫：{{today | date:‘EEE‘}}Thu

　　　　　　   小時格式化：

　　　　　　　　  24小時制數字小時：{{today | date:‘HH‘}} 00

　　　　　　　　　一天中的第幾個小時：{{today | date: ‘H‘}} 0

　　　　　　　　　12小時制數字小時：{{today | date:‘hh‘}} 12

　　　　　　　　   上午或下午的第幾個小時：：{{today | date:‘h‘}} 12

　　　　　　    分鐘格式化：

　　　　　　　　　數字分鐘數：{{today | date : ‘mm‘}} 05

　　　　　　　　　一個小時的第幾分鐘：{{today | date : ‘m‘}} 5

　　　　　　　 秒數格式化：

　　　　　　　　　數字秒數：{{today | date ‘ss‘}} 09

　　　　　　　　　一分鐘內的第幾秒:{{today | date ‘s‘}} 9

　　　　　　　　　毫秒數：{{today | date ‘sss‘}}

　　　　　　 　字元格式設定化：

　　　　　　　　  上下午標示：{{today | date: ‘a‘}} AM

　　　　　　　　　四位時區標示：{{today | date ‘Z‘}} 0700

                     自訂日期格式：

                         {{today | date:‘hh:mm:ss‘}}  23:15:40

　　　　　　　　　{{today | date:‘yyyy-MM-dd hh:mm:ss‘}} 2017 -5-22 23:15:40

　　　　

　　　　　filter: 可以從給定數組中選擇一個子集，並將其產生一個新數組返回；通常過濾需要進行展示的元素；

　　　　　　　　參數：第一個參數可以是 字串、對象、或是一個用來從數字中選擇元素的函數；

　　　　　　　　　　　第二個參數用來指定預期同實際值進行比較的方式；

                                      參數設定為true: 表示用angular.equals(expected,actual)對兩個值進行嚴格比較；

                                      參數設定為false:進行區分大小寫子字串比較；

                                      參數設定為函數：運行這個函數，如果返回真值就接受這個元素；

　　　　　json:   可以將一個JSON或JavaScript對象轉化成字串；

 　　　　  limitTo: 過濾器根據傳入的參數產生一個新的數組或字串，新的數組或字串的長度取決於傳入的參數，通過傳入的參數的正負來控制從前面還是從後面開始截取；

 　　　　　lowercase:  過濾器將字串轉化為小寫；

　　　　　 uppercase: 過濾器將字串轉化為大寫；

　　　　　 number: 將數字格式化成文本，第二個參數可選，用來控制截取小數點的位元，如果傳入的是非數字字元，會返回Null 字元串；

　　　　　　　　　　{{123456789 | number}}   1,234,567,890

　　　　　　　　　　{{1.23456789 | number:2}}   1.23

　　　　　　orderBy:過濾器可以用運算式對指定的數組進行排序，它接受兩個參數，第一個是必須的，第二個是可選的，控制排序的方向，第二個參數設定為true，排序反轉；

　　　　　　　　　　例如：{{---  | orderBy:‘name‘:true}}

                             使用+是升序，-是降序；orderBy:‘- age‘;按年齡的降序排列；

 

自訂過濾器：

             自訂過濾器建立是非常容易的，本質上市會把我們輸入的內容當作參數傳入進去的函數；

                  列子： angular.module(‘mainApp‘,[]).filter(‘capitlize‘,function(){

　　　　　　　　　　　　return function(input){

　　　　　　　　　　　　　　if(input){

　　　　　　　　　　　　　　　　　return input[0].toUpperCase() + input.slice(1);

　　　　　　　　　　　　　　}

　　　　　　　　　　　　}

　　　　　　　　　　});     //將字串的一個字母轉化為大寫的過濾器；

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

AangularJS過濾器詳解