<!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++){
这句报错TypeError: Cannot read property 'length' of undefined
根据《angular实战》的例子中做的,这个错该怎么整?
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.