AngularJS的內建過濾器詳解

來源:互聯網
上載者:User

   在我們開發中經常需要在頁面顯示給使用者的資訊需要一定處理格式化,才能顯示給使用者。在angularjs中為我們提供了叫filter的指令,讓我們能夠很輕易就能做到著一些列的功能,angularjs內部為我們提供了number等很多內建的filter。

  今天我們來瞭解一下AngularJS的內建過濾器

  先來看看這些內建過濾器使用方法:

  一個過濾器,不帶參數的情況

  {{expression | filter}}

  一個過濾器,帶參數的情況

  {{expression | filter:arguments}}

  一個過濾器,帶多個參數的情況

  {{expression | filter: arg1: arg2: ...}}

  多個過濾器,不帶參數的情況

  {{expression | filter1 | filter2 | ...}}

  下面我們分別使用以下AngularJS的內建過濾器

  currency

  currency允許我們設定自己的貨幣符號,預設情況下會採用用戶端所處地區的貨幣符號。

  可以這樣使用:{{ 3600 | currency: "$¥"}}

  返回結果為$¥123.00

  online code點擊預覽

  number

  number過濾器將數字格式化成文本,它的參數是可選的,用來控制小數點後的截取位元

  如果傳入的是一個非數字字元,會返回Null 字元串

  可以這樣使用:{{ 3600 | number:2}}

  返回結果為:3,600.00

  online code點擊預覽

  lowercase

  lowercase將字串轉換為小寫

  可以這樣使用:{{ "HEllo" | lowercase}}

  返回結果為:hello

  online code點擊預覽

  uppercase

  uppercase將字串轉換為大寫

  可以這樣使用:{{ "HEllo" | uppercase}}

  返回結果為:HELLO

  online code點擊預覽

  json

  json過濾器可以將一個JSON或者JavaScript對象轉換成字串。

  這個過濾器對調試相當有用

  可以這樣使用:{{ {"name":"dreamapple","language":"AngularJS"} | json}}

  返回結果為:{ "name": "dreamapple", "language": "AngularJS" }

  online code點擊預覽

  date

  date過濾器將日期過濾成你想要的格式,這個實在是很好的過濾器。

  這個過濾器用法很多我這裡列舉幾種常用的

  {{ today | date: "yyyy - mm - dd"}}

  結果為:2015 - 15 - 13

  {{ today | date: "yyyy - mm - dd HH:mm::ss"}}

  結果為:2015 - 18 - 13 20:18::38

  [online code](2015 - 18 - 13 20:18::38)

  還有三個內建的過濾器,但是使用稍微複雜一點,放在下一篇文章中我們大家一起探討吧

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.