快捷導(dǎo)航

AngularJs 常用的過(guò)濾器

更新時(shí)間：2017年05月15日 11:14:27 作者：魚(yú)愛(ài)上羊

本篇文章主要介紹了AngularJs常用的過(guò)濾器。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧

date格式化

{{ 1304375948024 | date }}       //結(jié)果：May 3, 2011
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}  //結(jié)果：05/03/2011 @ 6:39AM
{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }} //結(jié)果：2011-05-03 06:39:08

number格式化

{{ 1.234567 | number:1 }} //結(jié)果：1.2
{{ 1234567 | number }}  //結(jié)果：1,234,567

currency貨幣格式化

{{ 250 | currency }}     //結(jié)果：$250.00
{{ 250 | currency:"RMB ￥ " }}  //結(jié)果：RMB ￥ 250.00

filter查找

{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:'s'}} //查找含有有s的行
 
//上例結(jié)果：[{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}]
 
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{'name':'iphone'} }} //查找name為iphone的行
 
//上例結(jié)果:[{"age":20,"id":10,"name":"iphone"}]

orderBy對(duì)像排序

{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id':true }}  //根id降序排
 
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id' }}   //根據(jù)id升序排

limitTo字符串，對(duì)像的截取

{{ "i love tank" | limitTo:6 }}   //結(jié)果：i love
{{ "i love tank" | limitTo:-4 }}   //結(jié)果：tank
 
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | limitTo:1 }}  //結(jié)果：[{"age":20,"id":10,"name":"iphone"}]

方便自己，方便他人。

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Angular引入swiper后autoplay失效的解決辦法詳解
這篇文章主要介紹了Angular引入swiper后autoplay失效的解決辦法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-09-09
Angularjs 1.3 中的$parse實(shí)例代碼
本文通過(guò)實(shí)例代碼給大家介紹了angularjs $parse的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-09-09
AngularJS的內(nèi)置過(guò)濾器詳解
在我們開(kāi)發(fā)中經(jīng)常需要在頁(yè)面顯示給用戶的信息需要一定處理格式化，才能顯示給用戶。在angularjs中為我們提供了叫filter的指令，讓我們能夠很輕易就能做到著一些列的功能，angularjs內(nèi)部為我們提供了number等很多內(nèi)置的filter。
2015-05-05
AngularJS遞歸指令實(shí)現(xiàn)Tree View效果示例
這篇文章主要介紹了AngularJS遞歸指令實(shí)現(xiàn)Tree View效果,結(jié)合實(shí)例形式分析了AngularJS基于遞歸指令實(shí)現(xiàn)樹(shù)形結(jié)構(gòu)層次數(shù)據(jù)的相關(guān)操作步驟與注意事項(xiàng),需要的朋友可以參考下
2016-11-11
Angular @HostBinding()和@HostListener()用法
本篇文章主要介紹了Angular @HostBinding()和@HostListener()用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
ui-router中使用ocLazyLoad和resolve的具體方法
這篇文章主要介紹了ui-router中使用ocLazyLoad和resolve的具體方法，詳細(xì)的介紹了ocLazyLoad和resolve的具體用法，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-10-10
實(shí)例解析angularjs的filter過(guò)濾器
本文對(duì)angularjs的filter過(guò)濾器進(jìn)行系統(tǒng)介紹，附上實(shí)例解析，便于理解。具有很好的參考價(jià)值，需要的朋友可以看下
2016-12-12
Angularjs cookie 操作實(shí)例詳解
本文給大家分享Angularjs cookie 操作實(shí)例詳解，demo案例分析，感興趣的朋友參考下吧
2017-09-09
angularjs實(shí)現(xiàn)分頁(yè)和搜索功能
這篇文章主要介紹了angularjs實(shí)現(xiàn)分頁(yè)和搜索功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-01-01
angular中的http攔截器Interceptors的實(shí)現(xiàn)
本篇文章主要介紹了angular中的http攔截器Interceptors的實(shí)現(xiàn)的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。
2017-02-02