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;
}
};
});