filter過濾器是angular中一個很實用的工具，通過它我們可以很簡單的對我們的資料進行格式化，看例子：
運算式中添加過濾器
過濾器可以通過一個管道字元（|）和一個過濾器添加到運算式中。.
(（下面的兩個執行個體，我們將使用前面章節中提到的 person 控制器）)
uppercase 過濾器將字串格式化為大寫：
AngularJS 執行個體
<div ng-app="myApp" ng-controller="personCtrl"><p>姓名為 {{ lastName | uppercase }}</p></div>
嘗試一下 » lowercase 過濾器將字串格式化為小寫：
AngularJS 執行個體
<div ng-app="myApp" ng-controller="personCtrl"><p>姓名為 {{ lastName | lowercase }}</p></div>
嘗試一下 »
--------------------------------------------------------------------------------
currency 過濾器
currency 過濾器將數字格式化為貨幣格式：
AngularJS 執行個體
<div ng-app="myApp" ng-controller="costCtrl"><input type="number" ng-model="quantity"><input type="number" ng-model="price"><p>總價 = {{ (quantity * price) | currency }}</p></div>
嘗試一下 »
--------------------------------------------------------------------------------
向指令添加過濾器
過濾器可以通過一個管道字元（|）和一個過濾器添加到指令中。
orderBy 過濾器根據運算式排列數組：
AngularJS 執行個體
<div ng-app="myApp" ng-controller="namesCtrl"><ul> <li ng-repeat="x in names | orderBy:'country'"> {{ x.name + ', ' + x.country }} </li></ul><div>
嘗試一下 »
--------------------------------------------------------------------------------
過濾輸入
輸入過濾器可以通過一個管道字元（|）和一個過濾器添加到指令中，該過濾器後跟一個冒號和一個模型名稱。
filter 過濾器從數組中選擇一個子集：
AngularJS 執行個體
<div ng-app="myApp" ng-controller="namesCtrl"><p><input type="text" ng-model="test"></p><ul> <li ng-repeat="x in names | filter:test | orderBy:'country'"> {{ (x.name | uppercase) + ', ' + x.country }} </li></ul></div>
例子
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/angular.js/1.4.4/angular.js"></script> <script> angular.module('demo',[]) .filter('spillOver',function(){ return function(item,len){ var len = len||5; item = item.toString(); if(item.length>len){ return item.substr(0,len) + '……'; } return item; } }) </script></head><body ng-app='demo'> <p>{{1440838384000 | date:'yyyy-MM-dd HH:mm:ss'}}</p> <p>{{'每日每夜' | spillOver:'3'}}</p> <p>{{'沒有人還在這裡'|spillOver:'6'}}</p> <p>{{'沒有人還在這裡'|spillOver}}</p></body></html>
運行效果如下：
示範中的date是angular的內建filter，spillOver是我自訂的filter，具體的代碼可以參見js部分，還是很靈活的，預設的第一個參數就是管道符號“|”左邊的字串，而後面的參數可以通過自訂filter:傳入。
補充
AngularJS的內建過濾器
先來看看這些內建過濾器使用方法:
一個過濾器，不帶參數的情況
{{expression | filter}}
一個過濾器，帶參數的情況
{{expression | filter:arguments}}
一個過濾器，帶多個參數的情況
{{expression | filter: arg1: arg2: ...}}
多個過濾器，不帶參數的情況
{{expression | filter1 | filter2 | ...}}
下面我們分別使用以下AngularJS的內建過濾器
currency
currency允許我們設定自己的貨幣符號，預設情況下會採用用戶端所處地區的貨幣符號。
可以這樣使用：{{ 3600 | currency: "$￥"}}
返回結果為$￥123.00
number
number過濾器將數字格式化成文本，它的參數是可選的，用來控制小數點後的截取位元
如果傳入的是一個非數字字元，會返回Null 字元串
可以這樣使用：{{ 3600 | number:2}}
返回結果為：3,600.00
lowercase
lowercase將字串轉換為小寫
可以這樣使用：{{ "HEllo" | lowercase}}
返回結果為：hello
uppercase
uppercase將字串轉換為大寫
可以這樣使用：{{ "HEllo" | uppercase}}
返回結果為：HELLO
json
json過濾器可以將一個JSON或者JavaScript對象轉換成字串。
這個過濾器對調試相當有用
可以這樣使用：{{ {"name":"dreamapple","language":"AngularJS"} | json}}
返回結果為：{ "name": "dreamapple", "language": "AngularJS" }
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)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
