AngularJs 常用的過濾器
更新時(shí)間：2017年05月15日 11:14:27 作者：魚愛上羊
本篇文章主要介紹了AngularJs常用的過濾器。具有很好的參考價(jià)值。下面跟著小編一起來看下吧
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"}]
方便自己，方便他人。
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
您可能感興趣的文章:
- Angularjs過濾器實(shí)現(xiàn)動(dòng)態(tài)搜索與排序功能示例
- Angularjs使用過濾器完成排序功能
- AngularJS常見過濾器用法實(shí)例總結(jié)
- 詳解AngularJS中$filter過濾器使用(自定義過濾器)
- 實(shí)例解析angularjs的filter過濾器
- AngularJS過濾器filter用法總結(jié)
- Angular實(shí)現(xiàn)的自定義模糊查詢、排序及三角箭頭標(biāo)注功能示例
- AngularJS模糊查詢功能實(shí)現(xiàn)代碼(過濾內(nèi)容下拉菜單排序過濾敏感字符驗(yàn)證判斷后添加表格信息)
- AngularJS 過濾與排序詳解及實(shí)例代碼
- AngularJS ng-table插件設(shè)置排序
- Angular實(shí)現(xiàn)的內(nèi)置過濾器orderBy排序與模糊查詢功能示例
相關(guān)文章
AngularJS 限定$scope的范圍實(shí)例詳解
這篇文章主要介紹了AngularJS 限定$scope的范圍實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06
Angular 根據(jù) service 的狀態(tài)更新 directive
Angular JS (Angular.JS) 是一組用來開發(fā)Web頁面的框架、模板以及數(shù)據(jù)綁定和豐富UI組件。本文給大家介紹Angular 根據(jù) service 的狀態(tài)更新 directive，需要的朋友一起學(xué)習(xí)吧2016-04-04
利用Angular+Angular-Ui實(shí)現(xiàn)分頁（代碼加簡單）
這篇文章主要介紹了利用Angular+Angular-Ui實(shí)現(xiàn)分頁，利用Angular+Angular-Ui實(shí)現(xiàn)的分頁分頁代碼更加簡單，更加容易懂哦，相信本文的內(nèi)容對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-03-03
詳解Webstorm 下的Angular2.0開發(fā)之路(圖文)
這篇文章主要介紹了詳解Webstorm 下的Angular2.0開發(fā)之路(圖文) ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
本篇文章主要介紹了深入探究angular2 UI組件之primeNG用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
我們?cè)趹?yīng)用的頁面或者組件需要加載數(shù)據(jù)時(shí)，瀏覽器和angular渲染頁面都需要消耗一定的時(shí)間。這里的間隔可能很小，甚至讓人感覺不到區(qū)別；但也可能很長，這樣會(huì)導(dǎo)致讓我們的用戶看到了沒有被渲染過的頁面。本文將介紹Angular.js中處理頁面閃爍的方法。2017-03-03
Angular.js自定義指令學(xué)習(xí)筆記實(shí)例
這篇文章主要介紹了Angular.js自定義指令的實(shí)例代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
本文主要介紹了Angular的自定義指令，并提供了實(shí)例代碼，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2016-12-12
本文主要介紹AngularJS Scope(作用域),這里對(duì)Score知識(shí)做了詳細(xì)介紹,并提供實(shí)例代碼,有需要的小伙伴可以參考下2016-07-07
AngularJS 中的Promise --- $q服務(wù)詳解
這篇文章主要介紹了AngularJS 中的Promise --- $q服務(wù)詳解方法的相關(guān)資料,需要的朋友可以參考下2016-09-09