angularjs開發常見問題-2（angularjs內建過濾器）

標籤：lower   0.00   att   系統   res   輸入   rip   符號   var   

在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.00 RMB ￥1,000.00

8。 //解析後台傳到前台
，換行問題 module 指令

 module.filter(‘trustHtml‘, function ($sce) {        return function (input) {            return $sce.trustAsHtml(input);        }    });

前台

<article id="word-display4" ng-bind-html="outsPrintDetailList.strRowAllMoney | trustHtml"></article>

angularjs開發常見問題-2（angularjs內建過濾器）