在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.1
3.14
-3.14
3.00
0.00
0.01
100
1,000
1,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內置過濾器）