在AngularJS中 ,過濾器可以使用一個管道符(|)添加到表達式和指令中? 。angularjs的filter功能可分為二種,一種是內(nèi)置的過濾器奢米,一種是自定義的。
簡單的說一些內(nèi)置控制器漓库,不全恃慧,但經(jīng)常見到
先把script給大家 方便理解
1、貨幣格式處理currency允許我們設(shè)置自己的貨幣符號渺蒿,默認情況下會采用客戶端所處區(qū)域的貨幣符號痢士。可以這樣使用:{{ 3600 | currency: "$¥"}}返回結(jié)果為$¥123.00
2茂装、字母大小寫轉(zhuǎn)換怠蹂。uppercase? 轉(zhuǎn)換成大寫 ; lowercase 轉(zhuǎn)換成小寫
3、限制字符串或數(shù)組的長度??? limitTo:3? 限制長度為3? 在管道符后面? 管道符可連續(xù)使用少态,相當(dāng)于多次過濾
4城侧、給數(shù)字設(shè)置千分位? number : 2,保留兩位小數(shù)
5、日期格式轉(zhuǎn)化? 這里大家可以上網(wǎng)搜一下日期秒數(shù)的時間戳彼妻,精確到毫秒嫌佑,給大家一個網(wǎng)站http://tool.chinaz.com/Tools/unixtime.aspx,可以搜一下
6侨歉、普通數(shù)組排序? 默認是升序屋摇,和老師的名字重了,升序排列是orderBy,,降序排列是orderBy:order:true
7幽邓、數(shù)組中有對象的排序(按照對象的某個屬性去排序)或者其他的屬性來排序都行
下面利用過濾器寫一個小功能炮温,
這里面有條件過濾和條件排序兩個功能。在條件過濾中寫ng-model="ctrl.queryFilter",意思是按照input輸入框輸入的值去過濾牵舵,在條件排序中設(shè)置ng-model="ctrl.orderType"意思是按照下拉框中的條件進行過濾柒啤,然后在要輸出的標(biāo)簽內(nèi)部寫出和它們相對應(yīng)的過濾屬性名字,相當(dāng)于進行條件設(shè)置畸颅。? 里面還有個小錯誤? 在li標(biāo)簽里的ng-repeat? 寫成了repear? ,很抱歉手誤担巩,運行結(jié)果
發(fā)現(xiàn)gif不好使? ,這Tama就尷尬了没炒,回頭我再搞
自定義過濾器:功能是根據(jù)字符某個串兵睛,過濾掉這個字符串中的數(shù)字。思想也特別簡單窥浪,就是利用正則表達式把里面的數(shù)字進行篩選祖很,然后利用angularJS的寫法進行編譯