hello，everybady~~~ 今天有人問我怎麼使用過濾器，我就簡單的做了個總結，大家一起來糾錯唄~
對於正在工作的樓主來說，也覺得當時學習Angular稍稍有點頭疼，知識點很多，也挺懷念那時候一心扎進代碼的我們，同樣也解決了不少問題
我就是有點閒不住，愛逛社區，看到很多大神都在分享自己敲代碼遇到的那些坑，也決定加入這個小行列，說說最近遇到的東西~
有個初學者問我怎麼使用過濾器，今天做個詳細的介紹：
過濾器
AngularJS
過濾器（filter）正如其名，作用就是接收一個輸入，通過某個規則進行處理，然後返回處理後的結果。主要用在數據的格式化上，例如獲取一個數組中的子集，對數組中的元素進行排序等。
基本句法：
過濾器可以通過一個管道字符（|）和一個過濾器添加到表達式中。
{{expression | filter }}
ng內置了一些過濾器
它們是：currency(貨幣)、date(日期)、filter(子串匹配)、json(格式化json對象)、limitTo(限制個數)、lowercase(小寫)、uppercase(大寫)、number(數字）、orderBy(排序)
下面就舉例一一來說一下：
1 貨幣過濾器
<div>
原始輸出方式：<span ng-bind="price"></span>
</div>
<div>
通過拼接輸出數據的方式：￥<span ng-bind="price"></span>
</div>
<div>
<p>對於要展示的貨幣數據【原始數據就是數字】按照指定的貨幣格式進行輸出</p>
貨幣過濾器輸出：<span ng-bind="price | currency"></span><br />
貨幣過濾器輸出：<span ng-bind="price | currency:'人民幣￥'"></span><br />
貨幣過濾器輸出：<span ng-bind="price | currency:'￥':3"></span><br /> <!--小數點後3位-->
</div> <script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",["$scope",function($scope){
$scope.price=500.1314;
}]);
</script>大家可以工具裏運行一下。首先是原始的輸出方法
使用currency可以將數字格式化爲貨幣，默認是美元符號，你也可以自己傳入所需的符號，例如上面傳入的人民幣。
2 日期時間過濾器
<div>
原始輸出：<span ng-bind="date"></span>
</div>
<div>
日期格式化：<span ng-bind="date |date"></span>
</div>
<div>
<span ng-bind="date |date:'yyyy年MM月dd日 hh:mm:ss'"></span>
<span ng-bind="date |date:'yyyy年MM月dd日'"></span><br />
<span ng-bind="date |date:'hh:mm:ss'"></span>
</div> <script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",["$scope",function($scope){
$scope.date=new Date();
}]);
</script>日期格式化：
原生的js對日期的格式化能力有限，ng提供的date過濾器基本可以滿足一般的格式化要求
通常情況下，通常按照用戶的要求進行輸出，這時就會附帶參數
y/M/d/h/m/s/E 年/月/日/時/分/秒/星期
案例中最後兩個就是根據自己的需要加參數。
3 過濾輸出
關鍵詞：<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>
<script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",["$scope",function($scope){
$scope.users=[
{userID:1,username:"baiqian",nickname:"白淺"},
{userID:2,username:"fengjiu",nickname:"鳳九"},
{userID:3,username:"yehua",nickname:"夜華"},
{userID:4,username:"ali",nickname:"阿離"},
{userID:5,username:"donghua",nickname:"東華"},
{userID:6,username:"erge",nickname:"二哥"},
]
}]);4.JSON 過濾
<span ng-bind="users|json"></span>
數據中的對象，轉換成JSON字符串的格式輸出展示到頁面上, 經常能用於代碼程序調試，這個使用較少！
5 長度限制過濾器
長度：<input type="text" ng-model="length"/><br />
位置：<input type="text" ng-model="index"/>
<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>這裏的username ID nickname對應的跟上面的 過濾輸出 一樣，limitTo是截取長度 index是下標
6 字符串大小寫轉換過濾器
<div ng-bind="name"></div>
<div ng-bind="name | uppercase"></div>
<div ng-bind="name | lowercase"></div> <script>
var app=angular.module("myApp",[]);
app.controller("myCtrl",["$scope",function($scope){
$scope.name="Summer Wang";
}]);
</script>uppercase 大寫 lowercase小寫
7 排序輸出
排序關鍵詞：<input type="text" ng-model="kerword"/><br/>
排序順序：<input type="checkbox" ng-model="sort"/>倒序
<ul>
<li ng-repeat="u in users | orderBy:keyword:sort">
<span ng-bind="u.userID"></span>****
<span ng-bind="u.username"></span>****
<span ng-bind="u.nickname"></span>
</li>
</ul>orderBy 排序 默認false 降序 true升序
8 number
{{149016.1945000 | number:2}}以上都是內置的一些過濾器，應用起來不難，裏面有些常見的，有需要的儘管copy，有問題的再糾正 
除此之外還可以自定義過濾器，這個就強大了，可以滿足任何要求的數據處理。如果有需要，下篇文章再來分享哈~