Angualar 過濾器
過濾器的作用可總結爲對數據進行處理並返回需要的數據，其中包括對列表進行篩選、排序，或者對數據進行格式化處理等。
使用方式
使用 “|” 管道符號，這個符號在angular中表示調用過濾器格式化數據。例如：
{{exp | filtername : para1 : para2 : … paraN}}
管道符’|'可重複使用 。如 ： {{exp | filtername1 : para1 | filtername2 : para2 }} 兩個管道符之間的關係爲’並’
angular已經註冊了一些常用的過濾器，如currency，date，json，filter，limitTo，lowercase，number，oderBy，uppercase。個人覺得filter的使用擴展性較大，可滿足較多的需求。
//原始數據
var data = [{
id: 1,
name: "mingming",
score: 60,
sex: '男',
child: {
name: "dingding"
}
}, {
id: 2,
name: "dongdong",
score: 38,
sex: '女'
}, {
id: 3,
name: "xiaoxia",
score: 90,
sex: '女'
}, {
id: 4,
name: "xixi",
score: 77,
sex: '男',
child: {
name: "dixi"
}
}, {
id: 5,
name: "haha",
score: 89,
sex: '男'
}, {
id: 6,
name: "dongxi",
score: 98,
sex: '女',
child: {
name: "bo"
}
}];
var mode = angular.module("demo", []);
mode.controller("filterDemo", function ($scope) {
$scope.personList = data;
});
通過默認過濾器filter
語法
1.在頁面中調用
personList | filter:{obj}
obj的類型
- 字符串String
當第一個參數是string 類型時，會對array的整條記錄進行模糊篩選
當lineFilter爲’xi’時，表格中的結果是任意列中包含’xi’關鍵字的記錄。
<input type="text" class="form-control" id="exampleInputEmail1" ng-model="lineFilter" placeholder="lineFilter">
<div class="row">
<div class="col-md-12">
<table class="table table-hover table-striped">
<tr>
<td>#</td>
<td>姓名</td>
<td>性別</td>
<td>成績</td>
<td>孩子姓名</td>
</tr>
<tr ng-repeat="row in personList | filter:lineFilter">
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>{{row.sex}}</td>
<td>{{row.score}}</td>
<td>{{row.child? row.child.name : "--"}}</td>
</tr>
</table>
</div>
<div class="col-md-6"></div>
</div>
- JSON對象
以key-value的格式，對列表進行篩選，見下例，會對personList中每一個對象的name和score進行模糊搜索，這是指定對某一列進行模糊篩選。
如果有興趣，也可以試試加上對child數據的過濾。當參數爲json對象時，嚴格按照json對象的層級結構對數據進行篩選。
<input type="text" class="form-control" ng-model="groupFilter.name" placeholder="groupFilter.name">
<input type="text" class="form-control" ng-model="groupFilter.score" placeholder="groupFilter.score">
<table class="table table-hover table-striped">
<tr>
<td>#</td>
<td>姓名</td>
<td>性別</td>
<td>成績</td>
<td>孩子姓名</td>
</tr>
<tr ng-repeat="row in personList | filter:groupFilter">
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>{{row.sex}}</td>
<td>{{row.score}}</td>
<td>{{row.child? row.child.name : "--"}}</td>
</tr>
</table>
- 方法
當傳的參數爲一個function時，這裏的fn通常表示一種規則，可以傳兩個參數，第一個參數爲列表中的一個item，第二個參數爲這個item在列表中的index，可以根據每個item的特性，在方法中進行的邏輯處理，符合則返回true，不符合則返回false。
在下面的例子中，傳入filterFn規則，如果性別爲‘男’或者在列表的序號’index’爲偶數的時候，返回true，表示這一個是需要的item。最後得到性別爲‘男’或者’index’爲偶數的數據。（注：index從0開始）
var mode = angular.module("demo", []);
mode.controller("filterDemo", function ($scope) {
$scope.personList = data;
$scope.filterFn = function (item, index) {
console.log(item);
console.log(index);
if (item.sex === '男') {
return true;
}
if (index % 2 === 0) {
return true;
}
return false;
};
});
<table class="table table-hover table-striped">
<tr>
<td>#</td>
<td>姓名</td>
<td>性別</td>
<td>成績</td>
<td>孩子姓名</td>
</tr>
<tr ng-repeat="row in personList | filter:filterFn">
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>{{row.sex}}</td>
<td>{{row.score}}</td>
<td>{{row.child? row.child.name : "--"}}</td>
</tr>
</table>
2.在控制器中調用
需要在控制器中注入需要的$filter。
語法: $filter(‘filterName’)(data, param1)；
下面的例子爲上面第三個例子的另一種形式。
$scope.personList2 = $filter('filter')(data, function (item, index) {
if (item.sex === '男') {
return true;
}
if (index % 2 === 0) {
return true;
}
return false;
});
自定義過濾器
語法
personList | customerFilter:param1:param2:param3…
允許的參數個數以自定義過濾器的參數爲準。
在下面的例子中，自定義一個childrenFilter過濾器，第一個爲默認參數（需要排序的數組），後面爲自定義參數。
下面的代碼中實現了先按照第一個條件isCheck判斷需要對child進行篩選，然後按照第二個參數checkValue對child.name進行模糊搜索，返回篩選之後的列表。具體參數是什麼作用和中間的邏輯沒有太大的限制。
自定義過濾器的返回類型沒有限制，可以是列表，對象，字符串…
這種形式的過濾器可全局使用，無需注入
<input type="checkbox" ng-model="isCheck">
<input type="text" class="form-control" ng-model="checkValue" placeholder="checkValue">
<table class="table table-hover table-striped">
<tr>
<td>#</td>
<td>姓名</td>
<td>性別</td>
<td>成績</td>
<td>孩子姓名</td>
</tr>
<tr ng-repeat="row in personList | childrenFilter:isCheck:checkValue">
<td>{{row.id}}</td>
<td>{{row.name}}</td>
<td>{{row.sex}}</td>
<td>{{row.score}}</td>
<td>{{row.child? row.child.name : "--"}}</td>
</tr>
</table>
mode.filter("childrenFilter", function () {
return function (array, isCheck, checkValue) {
var result = [];
if (isCheck) {
for (var i = 0; i < array.length; i++) {
var item = array[i];
if (item.child) {
if (checkValue) {
if (item.child.name.indexOf(checkValue) >= 0) {
result.push(item);
}
} else {
result.push(item);
}
}
}
return result;
} else {
return array;
}
};
});