萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> AngularJS的內置過濾器詳解

AngularJS的內置過濾器詳解

   在我們開發中經常需要在頁面顯示給用戶的信息需要一定處理格式化,才能顯示給用戶。在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過濾器將數字格式化成文本,它的參數是可選的,用來控制小數點後的截取位數

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

  可以這樣使用:{{ 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)

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

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

copyright © 萬盛學電腦網 all rights reserved