AngularJs 常用的過濾器
更新時間：2017年05月15日 11:14:27 作者：魚愛上羊
本篇文章主要介紹了AngularJs常用的過濾器。具有很好的參考價值。下面跟著小編一起來看下吧
date格式化
{{ 1304375948024 | date }} //結果：May 3, 2011
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }} //結果：05/03/2011 @ 6:39AM
{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }} //結果：2011-05-03 06:39:08
number格式化
{{ 1.234567 | number:1 }} //結果：1.2
{{ 1234567 | number }} //結果：1,234,567
currency貨幣格式化
{{ 250 | currency }} //結果：$250.00
{{ 250 | currency:"RMB ￥ " }} //結果：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的行
//上例結果：[{"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的行
//上例結果:[{"age":20,"id":10,"name":"iphone"}]
orderBy對像排序
{{ [{"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' }} //根據id升序排
limitTo字符串，對像的截取
{{ "i love tank" | limitTo:6 }} //結果：i love
{{ "i love tank" | limitTo:-4 }} //結果：tank
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | limitTo:1 }} //結果：[{"age":20,"id":10,"name":"iphone"}]
方便自己，方便他人。
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
您可能感興趣的文章:
- Angularjs過濾器實現(xiàn)動態(tài)搜索與排序功能示例
- Angularjs使用過濾器完成排序功能
- AngularJS常見過濾器用法實例總結
- 詳解AngularJS中$filter過濾器使用(自定義過濾器)
- 實例解析angularjs的filter過濾器
- AngularJS過濾器filter用法總結
- Angular實現(xiàn)的自定義模糊查詢、排序及三角箭頭標注功能示例
- AngularJS模糊查詢功能實現(xiàn)代碼(過濾內容下拉菜單排序過濾敏感字符驗證判斷后添加表格信息)
- AngularJS 過濾與排序詳解及實例代碼
- AngularJS ng-table插件設置排序
- Angular實現(xiàn)的內置過濾器orderBy排序與模糊查詢功能示例
相關文章
這篇文章主要介紹了AngularJS 限定$scope的范圍實例詳解的相關資料,需要的朋友可以參考下2017-06-06
Angular 根據 service 的狀態(tài)更新 directive
Angular JS (Angular.JS) 是一組用來開發(fā)Web頁面的框架、模板以及數據綁定和豐富UI組件。本文給大家介紹Angular 根據 service 的狀態(tài)更新 directive，需要的朋友一起學習吧2016-04-04
利用Angular+Angular-Ui實現(xiàn)分頁（代碼加簡單）
這篇文章主要介紹了利用Angular+Angular-Ui實現(xiàn)分頁，利用Angular+Angular-Ui實現(xiàn)的分頁分頁代碼更加簡單，更加容易懂哦，相信本文的內容對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03
詳解Webstorm 下的Angular2.0開發(fā)之路(圖文)
這篇文章主要介紹了詳解Webstorm 下的Angular2.0開發(fā)之路(圖文) ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
本篇文章主要介紹了深入探究angular2 UI組件之primeNG用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
我們在應用的頁面或者組件需要加載數據時，瀏覽器和angular渲染頁面都需要消耗一定的時間。這里的間隔可能很小，甚至讓人感覺不到區(qū)別；但也可能很長，這樣會導致讓我們的用戶看到了沒有被渲染過的頁面。本文將介紹Angular.js中處理頁面閃爍的方法。2017-03-03
這篇文章主要介紹了Angular.js自定義指令的實例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
本文主要介紹了Angular的自定義指令，并提供了實例代碼，具有很好的參考價值，下面跟著小編一起來看下吧2016-12-12
本文主要介紹AngularJS Scope(作用域),這里對Score知識做了詳細介紹,并提供實例代碼,有需要的小伙伴可以參考下2016-07-07
AngularJS 中的Promise --- $q服務詳解
這篇文章主要介紹了AngularJS 中的Promise --- $q服務詳解方法的相關資料,需要的朋友可以參考下2016-09-09