<!DOCTYPE html>
<html lang="en" ng-app="a3_3">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="../bower_components/angular/angular.min.js"></script>
<style>
body{
font-size:12px;
}
ul{
list-style:none;
width:408px;
margin:0;
padding:0;
}
ul li{
float:left;
padding:5px 0;
}
ul .odd{
color:#0026ff;
}
ul .even{
color:#ff0000;
}
ul .bold{
font-weight:bold;
}
ul li span{
width:52px;
float:left;
padding:0 10px;
}
ul .focus{
background-color:#cccccc;
}
</style>
</head>
<body>
<h1>自定义过滤器</h1>
<p ng-controller="c3_3"></p>
<ul>
<li ng-class="{{bold}}">
<span>序号</span>
<span>姓名</span>
<span>性别</span>
<span>年龄</span>
<span>分数</span>
</li>
<li ng-repeat="stu in data |
young:1"
ng-class-odd='"odd"'
ng-class-even='"even"'>
<span>{{$index+1}}</span>
<span>{{stu.name}}</span>
<span>{{stu.sex}}</span>
<span>{{stu.age}}</span>
<span>{{stu.score}}</span>
</li>
</ul>
</body>
<script type="text/javascript">
var a3_3 = angular.module('a3_3',[]);
a3_3.controller('c3_3',['$scope', 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:97 }
];
}]);
a3_3.filter('young', function(){
return function(e,type){
console.log(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>
</html>
for(var i=0 ; i < e.length ; i ){
This sentence reports an error TypeError: Cannot read property 'length' of undefined
Based on the example in "Angular Combat", how to correct this mistake?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The function of
ng-repeat instruction is to traverse your array data, that is, your data.
The meaning of this instruction is to first use the young filter to filter your data, and then use ng-repeat to traverse your filtered data.