欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJS的內(nèi)置過濾器詳解

 更新時間:2015年05月14日 15:38:22   投稿:hebedich  
在我們開發(fā)中經(jīng)常需要在頁面顯示給用戶的信息需要一定處理格式化,才能顯示給用戶。在angularjs中為我們提供了叫filter的指令,讓我們能夠很輕易就能做到著一些列的功能,angularjs內(nèi)部為我們提供了number等很多內(nèi)置的filter。

今天我們來了解一下AngularJS的內(nèi)置過濾器

先來看看這些內(nèi)置過濾器使用方法:

一個過濾器,不帶參數(shù)的情況
{{expression | filter}}

一個過濾器,帶參數(shù)的情況
{{expression | filter:arguments}}

一個過濾器,帶多個參數(shù)的情況
{{expression | filter: arg1: arg2: ...}}

多個過濾器,不帶參數(shù)的情況
{{expression | filter1 | filter2 | ...}}

下面我們分別使用以下AngularJS的內(nèi)置過濾器

currency

currency允許我們設(shè)置自己的貨幣符號,默認情況下會采用客戶端所處區(qū)域的貨幣符號。
可以這樣使用:{{ 3600 | currency: "$¥"}}
返回結(jié)果為$¥123.00
online code點擊預(yù)覽

number

number過濾器將數(shù)字格式化成文本,它的參數(shù)是可選的,用來控制小數(shù)點后的截取位數(shù)
如果傳入的是一個非數(shù)字字符,會返回空字符串
可以這樣使用:{{ 3600 | number:2}}
返回結(jié)果為:3,600.00
online code點擊預(yù)覽

lowercase

lowercase將字符串轉(zhuǎn)換為小寫
可以這樣使用:{{ "HEllo" | lowercase}}
返回結(jié)果為:hello
online code點擊預(yù)覽

uppercase

uppercase將字符串轉(zhuǎn)換為大寫
可以這樣使用:{{ "HEllo" | uppercase}}
返回結(jié)果為:HELLO
online code點擊預(yù)覽

json

json過濾器可以將一個JSON或者JavaScript對象轉(zhuǎn)換成字符串。
這個過濾器對調(diào)試相當有用
可以這樣使用:{{ {"name":"dreamapple","language":"AngularJS"} | json}}
返回結(jié)果為:{ "name": "dreamapple", "language": "AngularJS" }
online code點擊預(yù)覽

date

date過濾器將日期過濾成你想要的格式,這個實在是很好的過濾器。
這個過濾器用法很多我這里列舉幾種常用的
{{ today | date: "yyyy - mm - dd"}}
結(jié)果為:2015 - 15 - 13
{{ today | date: "yyyy - mm - dd HH:mm::ss"}}
結(jié)果為:2015 - 18 - 13 20:18::38
[online code](2015 - 18 - 13 20:18::38)

還有三個內(nèi)置的過濾器,但是使用稍微復(fù)雜一點,放在下一篇文章中我們大家一起探討吧

以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。

相關(guān)文章

  • angular4+百分比進度顯示插件用法示例

    angular4+百分比進度顯示插件用法示例

    這篇文章主要介紹了angular4+百分比進度顯示插件用法,結(jié)合實例形式分析了Angular4安裝及使用百分比進度顯示插件相關(guān)步驟與操作技巧,需要的朋友可以參考下
    2019-05-05
  • Angular模版驅(qū)動表單的使用總結(jié)

    Angular模版驅(qū)動表單的使用總結(jié)

    這篇文章主要介紹了Angular模版驅(qū)動表單的使用總結(jié),本文實現(xiàn)了Angular支持表單的雙向數(shù)據(jù)綁定,校驗,狀態(tài)管理,非常具有實用價值,需要的朋友可以參考下
    2018-05-05
  • Angular2管道Pipe及自定義管道格式數(shù)據(jù)用法實例分析

    Angular2管道Pipe及自定義管道格式數(shù)據(jù)用法實例分析

    這篇文章主要介紹了Angular2管道Pipe及自定義管道格式數(shù)據(jù)用法,結(jié)合實例形式詳細分析了Angular2管道與純管道相關(guān)概念、語法及使用技巧,需要的朋友可以參考下
    2017-11-11
  • 詳解Angular cli配置過程記錄

    詳解Angular cli配置過程記錄

    這篇文章主要介紹了詳解Angular cli配置過程記錄,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-11-11
  • Angular中的ActivatedRoute和Router原理解釋

    Angular中的ActivatedRoute和Router原理解釋

    這篇文章主要為大家介紹了Angular中的ActivatedRoute和Router原理解釋,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-04-04
  • 使用AngularJS中的SCE來防止XSS攻擊的方法

    使用AngularJS中的SCE來防止XSS攻擊的方法

    這篇文章主要介紹了使用AngularJS中的SCE來防止XSS攻擊的方法,依靠合理地轉(zhuǎn)碼為HTML來預(yù)防跨站腳本漏洞共計,需要的朋友可以參考下
    2015-06-06
  • 學習Angular中作用域需要注意的坑

    學習Angular中作用域需要注意的坑

    這篇文章記錄了當時剛學習angular的時候踩的關(guān)于作用域的坑,希望給以后學習Angular作用域的朋友一個提醒,有需要的可以參考學習。
    2016-08-08
  • 淺談angular2子組件的事件傳遞(任意組件事件傳遞)

    淺談angular2子組件的事件傳遞(任意組件事件傳遞)

    今天小編就為大家分享一篇淺談angular2子組件的事件傳遞(任意組件事件傳遞),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • 基于angular實現(xiàn)樹形二級表格

    基于angular實現(xiàn)樹形二級表格

    這篇文章主要介紹了angular手寫樹形二級表格的完整代碼,代碼簡單易懂,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-10-10
  • SpringMVC簡單整合Angular2的示例

    SpringMVC簡單整合Angular2的示例

    這篇文章主要介紹了SpringMVC簡單整合Angular2的示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07

最新評論