前言：使用angular開(kāi)發(fā)項(xiàng)目已經(jīng)有一段時(shí)間了，相比于以前使用的jq，angular這種數(shù)據(jù)綁定形式的框架使用起來(lái)真是太方便了。今天在這里想給大家分享一下angular中一個(gè)很贊的功能——過(guò)濾器。自己會(huì)選取一下自己認(rèn)為比較實(shí)用的方法總結(jié)給大家。
首先，angular中的過(guò)濾器分為兩大類。一種是angular自帶的內(nèi)置過(guò)濾器，另一種是用戶根據(jù)自己的需求自定義的過(guò)濾器。
1.內(nèi)置過(guò)濾器
（1）時(shí)間格式化
{{1485449967197 | date}}
輸出： ?Jan 27, 2017 （不帶參數(shù)的這樣不常用）
{{1485449967197 | date:"yyyy-MM-dd hh:mm:ss"}}
輸出： ?2017-01-27 12:59:27 ?（可以根據(jù)自己的需求選擇輸出的形式，如只需要顯示月份和天數(shù)可以這樣 date："MM-dd"）
（2）number格式化
{{ 1234567 | number }}
輸出：1,234,567 （不帶參數(shù)）
{{ 1.234567 | number:1 }} ?
輸出：1.2 （四舍五入保留1位）
（3）limitTo長(zhǎng)度限制
截取字符串：
{{abcdefg | limitTo:3}}
輸出：abc
{{abcdefg | limitTo:-2}}
輸出：fg
截取數(shù)組：
$scope.arr=[
{name:aa},
{name:bb},
{name:cc},
{name:dd},
]
{{arr| limitTo:2}}
輸出：[{name:aa},{name:bb}] （這個(gè)功能在做前端分頁(yè)的時(shí)候很有用?。?/p>
（4）filter查找
$scope.arr=[
{name:aa},
{name:bb},
{name:cc},
{name:dd},
]
{{arr | filter:{name:aa} }} 查找arr數(shù)組中name為aa的項(xiàng)
輸出：[{name:aa}]
（5）orderBy對(duì)像排序
$scope.arr=[
{num:4}，
{num:7}，
{num:1}，
{num:2}，
]
{{arr | orderBy:num}}
{{arr | orderBy:num:true}}
輸出：
[{"num":1},{"num":2},{"num":4},{"num":7}] （以num屬性排序默認(rèn)升序）
[{"num":7},{"num":4},{"num":2},{"num":1}] （以num屬性排序num后傳true則為降序）
以上就是angular中我認(rèn)為比較實(shí)用的過(guò)濾器，當(dāng)然angular還內(nèi)置了其他的過(guò)濾器，比如json，貨幣，大小寫(xiě)等。但是通常都不會(huì)用，需要可以自己去查手冊(cè)，用法也是一樣的~
2自定義過(guò)濾器
很多時(shí)候內(nèi)置的過(guò)濾器并不能滿足我們?nèi)粘ｉ_(kāi)發(fā)的需要，這個(gè)時(shí)候就需要自己寫(xiě)一套過(guò)濾的規(guī)則。
自定義過(guò)濾器可以在controller中直接以函數(shù)的形式定義，也可以在module后面定義，如：
angular.module('caseApp').filter("test",function(){
? return function(data){
? ? return data
? }
})
自定義的過(guò)濾器我就上兩個(gè)我自己在項(xiàng)目中使用的例子來(lái)演示
1，直接以函數(shù)的形式定義的過(guò)濾器，作用去重復(fù)。
angular.module("test").controller("testCtrl",["$scope",function($scope){
$scope.arr=[
? {id:1},
? {id:2},
? {id:3},
? {id:4},
]
$scope.arr_f=[
? {id:3},
? {id:1}
]
$scope.filter1=function(item){
?for(var i=0;i<arr.length;i++){
? ? if(arr[i].id==item.id){
? ? ? ? return
? ? }
}
return item
}])
html:
<ul>
? <li ng-repeat="item inarr | filter:filter1">{{item.id}}</li>
</ul>
輸出：2，4
本例是直接使用函數(shù)作為過(guò)濾器規(guī)則，這種只適用于過(guò)濾數(shù)組時(shí)使用，過(guò)濾函數(shù)所接收的值為repeat每一項(xiàng)的值，所以例子中有相同的則返回空，沒(méi)有相同的則返回當(dāng)前本省。
2，以.filter形式定義的過(guò)濾器，作用統(tǒng)計(jì)數(shù)量
angular.module("test").controller("testCtrl",["$scope",function($scope){
$scope.arr=[
? {class:1},
? {class:2},
? {class:1},
? {class:3},
? {class:1},
? {class:2},
? {class:1},
? {class:2}
]
]})
.filter('filter2',function () {
return function (data,key) {
? var sum=0;
? for(var i=0;i<data.length;i++){
? if(data[i][key]==1){
? ? sum=sum+1
? }
? }
return sum
}}
html:{{arr | filter2:"class"}}
輸出：4
本例過(guò)濾器用來(lái)統(tǒng)計(jì)數(shù)據(jù)中某項(xiàng)值非常的方便。并且.filter形式的過(guò)濾器會(huì)把整個(gè)數(shù)據(jù)傳進(jìn)來(lái)，可以在過(guò)濾函數(shù)中把數(shù)據(jù)重新整合成自己需要的數(shù)據(jù)形式，基本就可以滿足絕大多數(shù)用戶的需求了~
