angularJS中的內(nèi)置過濾器

AngularJS中 ,過濾器可以使用一個管道符(|)添加到表達式和指令中? 。angularjs的filter功能可分為二種,一種是內(nèi)置的過濾器奢米,一種是自定義的。

簡單的說一些內(nèi)置控制器漓库,不全恃慧,但經(jīng)常見到

先把script給大家 方便理解

大體的script

1、貨幣格式處理currency允許我們設(shè)置自己的貨幣符號渺蒿,默認情況下會采用客戶端所處區(qū)域的貨幣符號痢士。可以這樣使用:{{ 3600 | currency: "$¥"}}返回結(jié)果為$¥123.00

結(jié)構(gòu)代碼
輸出顯示的結(jié)果

2茂装、字母大小寫轉(zhuǎn)換怠蹂。uppercase? 轉(zhuǎn)換成大寫 ; lowercase 轉(zhuǎn)換成小寫

結(jié)構(gòu)代碼
輸出顯示結(jié)果

3、限制字符串或數(shù)組的長度??? limitTo:3? 限制長度為3? 在管道符后面? 管道符可連續(xù)使用少态,相當(dāng)于多次過濾

代碼結(jié)構(gòu)
輸出顯示結(jié)果

4城侧、給數(shù)字設(shè)置千分位? number : 2,保留兩位小數(shù)

代碼結(jié)構(gòu)
輸出顯示結(jié)果

5、日期格式轉(zhuǎn)化? 這里大家可以上網(wǎng)搜一下日期秒數(shù)的時間戳彼妻,精確到毫秒嫌佑,給大家一個網(wǎng)站http://tool.chinaz.com/Tools/unixtime.aspx,可以搜一下

代碼結(jié)構(gòu)
輸出顯示結(jié)果

6侨歉、普通數(shù)組排序? 默認是升序屋摇,和老師的名字重了,升序排列是orderBy,,降序排列是orderBy:order:true

升序的兩種方法
降序排列
輸出結(jié)果顯示

7幽邓、數(shù)組中有對象的排序(按照對象的某個屬性去排序)或者其他的屬性來排序都行

升序和降序的代碼
輸出顯示結(jié)果

下面利用過濾器寫一個小功能炮温,

?

這里面有條件過濾和條件排序兩個功能。在條件過濾中寫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é)果


gif.gif

發(fā)現(xiàn)gif不好使? ,這Tama就尷尬了没炒,回頭我再搞

自定義過濾器:功能是根據(jù)字符某個串兵睛,過濾掉這個字符串中的數(shù)字。思想也特別簡單窥浪,就是利用正則表達式把里面的數(shù)字進行篩選祖很,然后利用angularJS的寫法進行編譯


代碼結(jié)構(gòu)


結(jié)果






最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市漾脂,隨后出現(xiàn)的幾起案子假颇,更是在濱河造成了極大的恐慌,老刑警劉巖骨稿,帶你破解...
    沈念sama閱讀 218,546評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件笨鸡,死亡現(xiàn)場離奇詭異,居然都是意外死亡坦冠,警方通過查閱死者的電腦和手機形耗,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,224評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來辙浑,“玉大人激涤,你說我怎么就攤上這事∨信唬” “怎么了倦踢?”我有些...
    開封第一講書人閱讀 164,911評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長侠草。 經(jīng)常有香客問我辱挥,道長,這世上最難降的妖魔是什么边涕? 我笑而不...
    開封第一講書人閱讀 58,737評論 1 294
  • 正文 為了忘掉前任晤碘,我火速辦了婚禮,結(jié)果婚禮上功蜓,老公的妹妹穿的比我還像新娘园爷。我一直安慰自己,他們只是感情好霞赫,可當(dāng)我...
    茶點故事閱讀 67,753評論 6 392
  • 文/花漫 我一把揭開白布腮介。 她就那樣靜靜地躺著,像睡著了一般端衰。 火紅的嫁衣襯著肌膚如雪叠洗。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,598評論 1 305
  • 那天旅东,我揣著相機與錄音灭抑,去河邊找鬼。 笑死抵代,一個胖子當(dāng)著我的面吹牛腾节,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 40,338評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼案腺,長吁一口氣:“原來是場噩夢啊……” “哼庆冕!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起劈榨,我...
    開封第一講書人閱讀 39,249評論 0 276
  • 序言:老撾萬榮一對情侶失蹤访递,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后同辣,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體拷姿,經(jīng)...
    沈念sama閱讀 45,696評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,888評論 3 336
  • 正文 我和宋清朗相戀三年旱函,在試婚紗的時候發(fā)現(xiàn)自己被綠了响巢。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,013評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡棒妨,死狀恐怖踪古,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情靶衍,我是刑警寧澤灾炭,帶...
    沈念sama閱讀 35,731評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站颅眶,受9級特大地震影響蜈出,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜涛酗,卻給世界環(huán)境...
    茶點故事閱讀 41,348評論 3 330
  • 文/蒙蒙 一铡原、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧商叹,春花似錦燕刻、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,929評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至弥咪,卻和暖如春过蹂,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背聚至。 一陣腳步聲響...
    開封第一講書人閱讀 33,048評論 1 270
  • 我被黑心中介騙來泰國打工酷勺, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人扳躬。 一個月前我還...
    沈念sama閱讀 48,203評論 3 370
  • 正文 我出身青樓脆诉,卻偏偏與公主長得像甚亭,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子击胜,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,960評論 2 355

推薦閱讀更多精彩內(nèi)容