在實際項目中,經常會遇到這樣的事情,傳回的資料的格式,并不是我們希望的樣子,這時候,你就需要對資料進行格式化了,還好,angularjs提供這樣的過濾器,更友善我們的操作。
<a href="http://www.cnblogs.com/wolf-sun/p/4614532.html">[angularjs]ng-select和ng-options</a>
<a href="http://www.cnblogs.com/wolf-sun/p/4620150.html">[angularjs]ng-show和ng-hide</a>
<a href="http://www.cnblogs.com/wolf-sun/p/4621854.html">[angularjs]視圖和路由(一)</a>
<a href="http://www.cnblogs.com/wolf-sun/p/4638029.html">[angularjs]視圖和路由(二)</a>
<a href="http://www.cnblogs.com/wolf-sun/p/4640725.html">[angularjs]視圖和路由(三)</a>
<a href="http://www.cnblogs.com/wolf-sun/p/4656216.html">[angularjs]視圖和路由(四)</a>
<a href="http://www.cnblogs.com/wolf-sun/p/4676116.html">[angularjs]ng-class,ng-class-even,ng-class-odd</a>
<a href="http://www.cnblogs.com/wolf-sun/p/4713028.html">[angularjs]單頁應用之分頁</a>
<a href="http://www.cnblogs.com/wolf-sun/p/4732942.html">[angularjs]國際化</a>
<a href="http://www.cnblogs.com/wolf-sun/p/4749854.html">[angularjs]ng-repeat中使用ng-model遇到的問題</a>
過濾器用來格式化需要展示給使用者的資料。angularjs有很多實用的内置過濾器,同時也提供了友善的途徑可以自己建立過濾器。
在html中的模闆綁定符号{{ }}内通過|符号來調用過濾器。當然也可以對同一個資料使用多個過濾器。
currency
currecy過濾器可以将一個數值格式化為貨币格式。
currecy過濾器允許我們自己設定貨币符号。預設情況下會采用用戶端所處區域的貨币符号, 但是也可以自定義貨币符号。
date
date過濾器可以将日期格式化成需要的格式。angularjs中内置了幾種日期格式,如果沒有 指定使用任何格式,預設會采用mediumdate格式。
如果顯示2015-08-23格式的日期,可以這樣寫日期格式化格式:
filter
filter過濾器可以從給定的資料源中選擇一個子集,并将其生成一個新的資料源傳回。這個過濾器通常用來過濾需要進行展示的元素。比如,在搜尋中,可以從一個數組中立刻過濾出所需的結果。這個過濾器的第一個參數可以是字元串,對象或一個用來從數組中選擇的函數。
filter過濾器第一個參數:
字元串:傳回所有包含這個字元串的元素。如果我們想傳回不包含這個字元串的元素,在參數前加!符号。
對象:angularjs會将待過濾對象的屬性同這個對象中的同名屬性進行比較,如果屬性值是字元串就會判斷是否包含該字元串。如果我們希望對全部屬性進行對比,可以将$當作鍵名。
函數
對每個元素都執行這個函數,傳回非假值得元素會出啊先在新的數組中并傳回。
也可以自定義一個函數進行過濾,比如輸出年齡大于21的對象。
第二個參數:
true:使用angular.equals(expected,actual)對兩個值進行嚴格比較。
false:進行差別大小寫的字元串比較。
函數:運作這個函數,如果傳回真值就接受這個元素。
json
json過濾器可以将一個json或javascript對象轉換成字元串。
limitto
limitto過濾器會根據傳入的參數生成一個新的數組或字元串,新的數組或字元串的長度取決于傳入的參數,通過傳入參數的正負值來控制從前面還是從後面開始截取。
注意 如果傳入的長度值大于被操作的數組或字元串的長度,那麼整個字元串或數組都會被傳回。
對于數組,使用limitto過濾器,下标是從1開始的,比如:
lowercase
lowercase過濾器将字元串轉換為小寫。
uppercase
uppercase 過濾器可以将字元串轉換為大寫。
number
number過濾器将數字格式化為文本,第二個參數是可選的,用來控制小數點後截取的位數。
如果傳入一個非數字字元,會傳回空字元串。
orderby
orderby過濾器可以用表達式對指定的數組進行排序。
orderby可以接受兩個參數,第一個是必需的,第二個可選。
第一個參數是用來确定數組排序方向的謂詞。
第一個參數可以為函數,字元串,數組。
函數:該函數作為排序對象的getter方法。
字元串:對這字元串進行解析的結果将決定數組元素的排序方向。可以傳入+或者-來進行強制升序或者降序。
數組:在排序表達式中使用數組元素作為謂詞。對于與表達式結果并不嚴格相等的每個元素,則使用第一個謂詞。
第二個參數用來控制排序的方向(是否逆向)
按name進行排序:
可以通過第二個參數對結果進行反轉,
以上就是angularjs内置的過濾器,但有時上面的過濾器并不能滿足我們的需求,能不能自己定義過濾器呢?答案是肯定的,并且實作起來非常簡單。
自定義的過濾器有點類似上面的filter過濾器,下面舉一個例子,對比一下。
我們現在實作一個自定義過濾器,将一個句子的首字母轉換為大寫。
angularjs的過濾器内容到此結束,在實際項目中還是比較常用的。
參考
angularjs權威教程
部落格位址:
<a href="http://www.cnblogs.com/wolf-sun">http://www.cnblogs.com/wolf-sun/</a>
部落格版權:
本文以學習、研究和分享為主,歡迎轉載,但必須在文章頁面明顯位置給出原文連接配接。
如果文中有不妥或者錯誤的地方還望高手的你指出,以免誤人子弟。如果覺得本文對你有所幫助不如【推薦】一下!如果你有更好的建議,不如留言一起讨論,共同進步!
再次感謝您耐心的讀完本篇文章。http://www.cnblogs.com/wolf-sun/p/4752004.html