angularjs內建過濾器的使用學習

angularjs內建過濾器的使用學習

在angular中內建了幾個常用的filter,可以簡化我們的操作。

過濾器使用 '|' 符號，概念有點類似於linux中的管道。

1、filter （過濾）

filter可以根據條件過濾資料，例子：

{{[{name:'coolcao',age:23},{name:'lily',age:20},{name:'tom',age:22}] | filter:'coolcao'}}

結果：

[{"name":"coolcao","age":23}]

這裡是過濾含有'coolcao'的對象，不論是哪個屬性中含有'coolcao'都可以。

如果要精確過濾，例如只要name為coolcao的可以使用如下：

{{[{name:'coolcao',age:23},{name:'lily',age:22},{name:'tom',age:22}] | filter:{'name':'coolcao'} }}

注意：filter 對象使用的大括弧和angularjs取值所用的大括弧之間要留至少一個空格（就是最後三個大括弧倒數第三個和倒數1，2兩個大括弧之前留至少一個空格，不然angularjs會解析錯誤）

2、date : 日期格式化

在系統後台返回的資料中，時間欄位，我們可能使用的是時間戳記，Long型，在頁面顯示中肯定格式化為類似於‘2012-12-12 12:12:12’的字串，使用date過濾器即可

{{1423130269432 | date:'yyyy-MM-dd HH:mm:ss'}}

顯示結果：

2015-02-05 17:57:49

注意：Long型的時間戳記欄位是以毫秒為單位的，如果系統後台使用的是以秒為單位的，那麼在angular裡要乘以1000轉換為以毫秒為單位。這裡一定要分清到底是秒還是毫秒

3、number : 數字格式化

{{ 3.1415926 | number:1 }}{{ 3.1415926 | number:2 }}{{ -3.1415926 | number:2 }}{{ 3 | number:2 }}{{ 0.002 | number:2 }}{{ 0.009 | number:2 }}{{100 | number}}{{1000 | number}}{{1000 | number:2}}

啥也不說了，直接看結果：

3.13.14-3.143.000.000.011001,0001,000.00

4、orderBy 排列

{{[{name:'coolcao',age:23},{name:'lily',age:20},{name:'tom',age:22}] | orderBy:'age'}}

結果：

[{"name":"lily","age":20},{"name":"tom","age":22},{"name":"coolcao","age":23}]

預設是升序排列，如果要倒序：

{{[{name:'coolcao',age:23},{name:'lily',age:20},{name:'tom',age:22}] | orderBy:'age':true}}

5、json格式化

{{[{name:'coolcao',age:23},{name:'lily',age:22},{name:'tom',age:22}] | json}}

結果：

[ { "name": "coolcao", "age": 23 }, { "name": "lily", "age": 22 }, { "name": "tom", "age": 22 } ]

注意：輸入是js的對象（非標準json），輸出的是標準的json字串（屬性名稱會用雙引號）

6、大小寫轉換： uppercase,lowercase

{{'abc' | uppercase}}

將輸出大寫的 ABC

注意：uppercase,lowercase只能對字串進行過濾轉換

7、currency : 貨幣的格式化

有時候我們需要把數字顯示為貨幣的形式方便展示，可以使用currency進行格式化

{{1000 | currency }}{{1000 | currency:"RMB ￥" }}

顯示：

$1,000.00RMB ￥1,000.00