AngularJS-過濾器入門
阿新 • • 發佈：2019-02-17
顧名思義，過濾器就是過濾自己想要的內容，排序順序等等.......
貨幣過濾：
price | currency
直接這樣寫會發現並不是自己想要的效果，這樣過濾的都是整數，在貨幣中，不可能都是整數，意味著小數部分將 不 會顯示，如果拼接.00，又會出現另一種問題，例如過濾的是小數14.0，則會出現14.0.00。price | currency：' 任何字元'
後面 可跟單引號，單引號裡一個數據的時候，會將字元完全顯示出來，不會出現上面將￥符號轉化為$
price | currency：' 任何字元，數字'
數字部分表示後面保留幾位小數，完美解決了我們想要的效果的問題日期過濾：
date | date
這樣過濾的是最原始的輸出：2017-04-27T14:01:57.922Z，與理想效果差太多date | date："'yyyy年MM月dd日 hh:mm:ss'"
獲取單個時間或者日期，也可單獨寫
date | date："'yyyy年MM月dd日'"
date | date："'hh:mm:ss'"
篩選過濾（關鍵詞）：
filter: 參考程式碼： html部分：js部分：關鍵詞：<input type="text" ng-model="keyword"> <br /> <ul> <li ng-repeat="u in users | filter:keyword"> <span ng-bind="u.userID"></span>**** <span ng-bind="u.username"></span>**** <span ng-bind="u.nickname"></span> </li> </ul>
$scope.users = [
{userID:1, username:"cat", nickname:"tom"},
{userID:2, username:"xiaofan", nickname:"張小凡"},
{userID:3, username:"biyao", nickname:"碧瑤"},
{userID:4, username:"luxueqi", nickname:"陸雪琪"}JSON過濾器
| json 把資料中的物件，轉換成JSON字串的格式輸出展示到頁面上經常能用於程式碼程式除錯，使用較少！
長度限制過濾器
| limitTo:length:index length:長度 index:位置 參考程式碼： 長度：<input type="text" ng-model="length"><br />
位置：<input type="text" ng-model="index">
<br />
<ul>
<li ng-repeat="u in users | limitTo:length:index">
<span ng-bind="u.userID"></span>****
<span ng-bind="u.username"></span>****
<span ng-bind="u.nickname"></span>
</li>
</ul>字串大小寫轉換過濾
<div ng-bind="name | uppercase"></div>
<div ng-bind="name | lowercase"></div>