先通过页面模块调用“filter”方法,创建了一个名为“young”的自定义过滤器,该过滤器将通过return语句返回一个函数。
在函数体中,通过代码编写,实现对应需求的功能开发。
首先,在这个函数中,定义了两个形参“e”和“type”,两者“e”参数在调用过滤器时,将会被需要过滤的数据自动注入,后者“type”参数,将会在调用过滤器时,通过冒号形式向过滤器传递实参。
其次,在函数体中,由于本示例过滤的数据是一个数组,因此,先定义一个名为“_out”的空数组,并将传来的“type”性别类型参数进行字符转化,保存在变量“_sex”中;然后,对自动注入的“e”数组中的数据进行遍历,在遍历过程中,检测各项元素的“年龄”属性是否在“22~28”范围之间,并且“性别”属性值是否与变量“_sex”相符。如果这两项条件都满足,则将该项数组元素添加至空数组“_out”中。
最后,在函数体结束时,通过调用return语句,将包含符合过滤条件数据的数组“_out”返回给自定义过滤器“young”。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
body{font-size: 12px;}
ul{
list-style-type: none;
width: 408px;
margin: 0px; padding: 0px;
}
ul li{
float: left;
padding: 5px 0px;
}
ul .bold{font-weight: bold;}
ul li span{
width: 52px;
float: left;
padding: 0px 10px;
}
</style>
</head>
<body>
<div ng-controller="myCtrl">
<ul>
<li ng-class="{{bold}}">
<span>序号</span>
<span ng-click="title='name'; desc=!desc">姓名</span>
<span ng-click="title='sex'; desc=!desc">性别</span>
<span ng-click="title='age'; desc=!desc">年龄</span>
<span ng-click="title='score'; desc=!desc">分数</span>
</li>
<li ng-repeat=" stu in data | young:0">
<span>{{$index+1}}</span>
<span>{{stu.name}}</span>
<span>{{stu.sex}}</span>
<span>{{stu.age}}</span>
<span>{{stu.score}}</span>
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope){
$scope.bold = "bold";
$scope.data = [
{ name: "张明明", sex: "女", age: 24, score: 95},
{ name: "沥青四", sex: "女", age: 27, score: 87},
{ name: "刘晓华", sex: "男", age: 28, score: 86},
{ name: "陈仲忠", sex: "男", age: 23, score: 99}
];
})
app.filter('young', function(){
return function(e, type){
var _out = [];
var _sex = type ? " 男" : "女";
for(var i=0; i<e.length; i++){
if(e[i].age > 22 && e[i].age < 28 && e[i].sex == _sex)
_out.push(e[i]);
}
return _out;
}
})
</script>
</body>
</html>