天天看點

[Angularjs]過濾器

在實際項目中,經常會遇到這樣的事情,傳回的資料的格式,并不是我們希望的樣子,這時候,你就需要對資料進行格式化了,還好,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過濾器允許我們自己設定貨币符号。預設情況下會采用用戶端所處區域的貨币符号, 但是也可以自定義貨币符号。 

[Angularjs]過濾器
[Angularjs]過濾器
[Angularjs]過濾器

date

date過濾器可以将日期格式化成需要的格式。angularjs中内置了幾種日期格式,如果沒有 指定使用任何格式,預設會采用mediumdate格式。

[Angularjs]過濾器
[Angularjs]過濾器
[Angularjs]過濾器
[Angularjs]過濾器
[Angularjs]過濾器
[Angularjs]過濾器

如果顯示2015-08-23格式的日期,可以這樣寫日期格式化格式: 

filter

filter過濾器可以從給定的資料源中選擇一個子集,并将其生成一個新的資料源傳回。這個過濾器通常用來過濾需要進行展示的元素。比如,在搜尋中,可以從一個數組中立刻過濾出所需的結果。這個過濾器的第一個參數可以是字元串,對象或一個用來從數組中選擇的函數。

filter過濾器第一個參數:

字元串:傳回所有包含這個字元串的元素。如果我們想傳回不包含這個字元串的元素,在參數前加!符号。

對象:angularjs會将待過濾對象的屬性同這個對象中的同名屬性進行比較,如果屬性值是字元串就會判斷是否包含該字元串。如果我們希望對全部屬性進行對比,可以将$當作鍵名。

函數

對每個元素都執行這個函數,傳回非假值得元素會出啊先在新的數組中并傳回。

[Angularjs]過濾器
[Angularjs]過濾器

也可以自定義一個函數進行過濾,比如輸出年齡大于21的對象。

[Angularjs]過濾器

第二個參數:

true:使用angular.equals(expected,actual)對兩個值進行嚴格比較。

false:進行差別大小寫的字元串比較。

函數:運作這個函數,如果傳回真值就接受這個元素。

json

json過濾器可以将一個json或javascript對象轉換成字元串。

[Angularjs]過濾器

limitto

limitto過濾器會根據傳入的參數生成一個新的數組或字元串,新的數組或字元串的長度取決于傳入的參數,通過傳入參數的正負值來控制從前面還是從後面開始截取。

注意 如果傳入的長度值大于被操作的數組或字元串的長度,那麼整個字元串或數組都會被傳回。
[Angularjs]過濾器

對于數組,使用limitto過濾器,下标是從1開始的,比如:

[Angularjs]過濾器

lowercase

lowercase過濾器将字元串轉換為小寫。

uppercase 

uppercase 過濾器可以将字元串轉換為大寫。

number

number過濾器将數字格式化為文本,第二個參數是可選的,用來控制小數點後截取的位數。

如果傳入一個非數字字元,會傳回空字元串。
[Angularjs]過濾器

 orderby

orderby過濾器可以用表達式對指定的數組進行排序。

orderby可以接受兩個參數,第一個是必需的,第二個可選。

第一個參數是用來确定數組排序方向的謂詞。

第一個參數可以為函數,字元串,數組。

函數:該函數作為排序對象的getter方法。

字元串:對這字元串進行解析的結果将決定數組元素的排序方向。可以傳入+或者-來進行強制升序或者降序。

數組:在排序表達式中使用數組元素作為謂詞。對于與表達式結果并不嚴格相等的每個元素,則使用第一個謂詞。

第二個參數用來控制排序的方向(是否逆向)

 按name進行排序:

[Angularjs]過濾器

可以通過第二個參數對結果進行反轉,

[Angularjs]過濾器

以上就是angularjs内置的過濾器,但有時上面的過濾器并不能滿足我們的需求,能不能自己定義過濾器呢?答案是肯定的,并且實作起來非常簡單。

自定義的過濾器有點類似上面的filter過濾器,下面舉一個例子,對比一下。

我們現在實作一個自定義過濾器,将一個句子的首字母轉換為大寫。

[Angularjs]過濾器
[Angularjs]過濾器
[Angularjs]過濾器

 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