文章出處
文章列表
通過管道字符（‘|’），過濾器可以被添加到表達式和指令中。
AngularJS過濾器
AngularJS過濾器可以被用來轉換（格式化）數據：
| 過濾器 | 描述 |
|---|---|
| currency | 將數字格式化為現金格式。 |
| filter | 從一個集合中選擇子項。 |
| lowercase | 將字符串轉換為小寫形式。 |
| orderBy | 通過一個表達式對集合元素進行排序。 |
| uppercase | 將字符串轉換為大寫形式。 |
在表達式中添加過濾器
過濾器可以通過管道字符（‘|’）被添加到表達式。
接下來的兩個示例我們將使用在之前的章節中使用過的person控制器。
uppercase過濾器用來將給定的字符串轉換成大寫形式：
<div ng-app="" ng-controller="personCtrl"> <p>The name is {{ lastName | uppercase }}</p> </div>
lowercase過濾器用來將給定的字符串轉換成小寫形式：
<div ng-app="" ng-controller="personCtrl"> <p>The name is {{ lastName | lowercase }}</p> </div>
currency過濾器
currency過濾器用來將數字格式化為現金格式：
<div ng-app="" ng-controller="costCtrl"> <input type="number" ng-model="quantity"> <input type="number" ng-model="price"> <p>Total = {{ (quantity * price) | currency }}</p> </div>
將過濾器添加到指令
過濾器也可以通過管道字符（‘|’）被添加到指令。
orderBy過濾器通過表達式對數組進行排序：
<div ng-app="" ng-controller="namesCtrl"> <ul> <li ng-repeat="x in names | orderBy:'country'"> {{ x.name + ', ' + x.country }} </li> </ul> <div>
通過輸入進行過濾
通過在指令中使用管道字符（‘|’），后面緊跟filter加冒號再加上一個模型的名稱，可以形成一個輸入過濾器，用來根據用戶輸入的內容對集合進行過濾：
<div ng-app="" 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>
文章列表
全站熱搜
留言列表
