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í)也希望多多支持腳本之家！
您可能感興趣的文章:
- Angularjs過(guò)濾器實(shí)現(xiàn)動(dòng)態(tài)搜索與排序功能示例
- Angularjs使用過(guò)濾器完成排序功能
- AngularJS常見(jiàn)過(guò)濾器用法實(shí)例總結(jié)
- 詳解AngularJS中$filter過(guò)濾器使用(自定義過(guò)濾器)
- 實(shí)例解析angularjs的filter過(guò)濾器
- AngularJS過(guò)濾器filter用法總結(jié)
- Angular實(shí)現(xiàn)的自定義模糊查詢、排序及三角箭頭標(biāo)注功能示例
- AngularJS模糊查詢功能實(shí)現(xiàn)代碼(過(guò)濾內(nèi)容下拉菜單排序過(guò)濾敏感字符驗(yàn)證判斷后添加表格信息)
- AngularJS 過(guò)濾與排序詳解及實(shí)例代碼
- AngularJS ng-table插件設(shè)置排序
- Angular實(shí)現(xiàn)的內(nèi)置過(guò)濾器orderBy排序與模糊查詢功能示例
相關(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
在我們開(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í)例詳解，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