angular.js - angular 一个自定义过滤器报错TypeError

浏览:31日期:2023-01-06

问题描述

<!DOCTYPE html><html lang='en' ng-app='a3_3'><head> <meta charset='UTF-8'> <title>Title</title> <script type='text/javascript' src='https://www.6hehe.com/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实战》的例子中做的,这个错该怎么整?

问题解答

回答1:

ng-repeat指令的作用是遍历你的数组数据,也就是你的data。

<li ng-repeat='stu in data |young:1'></li>

这个指令的意思是,先使用young过滤器来过滤你的data,然后使用ng-repeat来遍历你过滤后的数据。

相关文章: