<!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实战》的例子中做的,这个错该怎么整?
ng-repeat指令的作用是遍历你的数组数据,也就是你的data。
这个指令的意思是,先使用young过滤器来过滤你的data,然后使用ng-repeat来遍历你过滤后的数据。