Angular學(xué)習(xí)筆記之a(chǎn)ngular的$filter服務(wù)淺析
首先，介紹下$filter服務(wù)：
1、$filter是用來(lái)進(jìn)行數(shù)據(jù)格式化的專用服務(wù)；
2、AngularJS內(nèi)置了currency、date、filter、json、limitTo、lowercase、uppercase、number、orderBy這8個(gè)filter；
3、filter可以嵌套使用，用管道符號(hào)"|"來(lái)分隔（有點(diǎn)像linux）；
4、filter可以傳遞參數(shù)；
5、用戶可自定義filter。
介紹下內(nèi)置filter：
currency：用于格式化貨幣，如在數(shù)值前自動(dòng)加上"$"或"￥"之類(lèi)的。
date：格式化日期，它會(huì)提供豐富的日期格式。
json：完成json格式化。
number：如轉(zhuǎn)成兩位小數(shù)等。
orderBy：進(jìn)行排序。
filter的簡(jiǎn)單使用：
{{ 1304375948024 | date }}
{{ 1304375948024 | date:"MM/dd/yyyy h:mma" }}
{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }}
{{ 30 | currency }}
輸出：
May 3, 2011
05/03/2011 6:39AM
2011-05-03 06:39:08
$30.00
自定義filter：
eg：
var myModule = angular.module('myModule',[]);
myModule.filter('myFilter',function(){
return function(item){
return 'Hi,'+item;
}
});
使用： {{ 'JennyLin' | myFilter }}
以上內(nèi)容比較詳細(xì)的給大家介紹了angular的$filter服務(wù)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
這篇文章主要介紹了AngularJS 表達(dá)式，這里整理了詳細(xì)的資料，有需要的小伙伴可以參考下2016-09-09
angularjs實(shí)現(xiàn)柱狀圖動(dòng)態(tài)加載的示例
本篇文章主要介紹了angularjs實(shí)現(xiàn)柱狀圖動(dòng)態(tài)加載的示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12![angular 數(shù)據(jù)綁定之[]和{{}}的區(qū)別](http://img.jbzj.com/images/xgimg/bcimg2.png)
angular 數(shù)據(jù)綁定之[]和{{}}的區(qū)別
這篇文章主要介紹了angular 數(shù)據(jù)綁定之[]和{{}}的區(qū)別，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
最近抽空學(xué)習(xí)了一下Angular6，之前主要使用的是vue，所以免不了的也想對(duì)Angular6提供的工具進(jìn)行一些封裝，今天主要就跟大家講一下這個(gè)http模塊2018-08-08
使用JavaScript的AngularJS庫(kù)編寫(xiě)hello world的方法
這篇文章主要介紹了使用JavaScript的AngularJS庫(kù)編寫(xiě)hello world的方法,AngularJS是一款高人氣的JavaScript庫(kù),需要的朋友可以參考下2015-06-06
angularjs中回車(chē)鍵觸發(fā)某一事件的方法
下面小編就為大家?guī)?lái)一篇angularjs中回車(chē)鍵觸發(fā)某一事件的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
AngularJS實(shí)現(xiàn)單一頁(yè)面內(nèi)設(shè)置跳轉(zhuǎn)路由的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)單一頁(yè)面內(nèi)設(shè)置跳轉(zhuǎn)路由的方法,結(jié)合實(shí)例形式分析了AngularJS路由操作相關(guān)設(shè)置與使用技巧,需要的朋友可以參考下2017-06-06
AngularJS解決ng界面長(zhǎng)表達(dá)式(ui-set)的方法分析
這篇文章主要介紹了AngularJS解決ng界面長(zhǎng)表達(dá)式(ui-set)的方法,通過(guò)具體問(wèn)題的分析并結(jié)合實(shí)例形式給出了AngularJS長(zhǎng)表達(dá)式的相關(guān)使用技巧,需要的朋友可以參考下2016-11-11
本篇文章主要介紹了詳解AngularJS2 Http服務(wù)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
AngularJS解決ng-if中的ng-model值無(wú)效的問(wèn)題
本篇文章主要介紹了AngularJS解決ng-if中的ng-model值無(wú)效的問(wèn)題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06