angular.js - angular 一个自定义过滤器报错TypeError
天蓬老师
天蓬老师 2017-05-15 17:04:55
0
1
475
<!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实战》的例子中做的,这个错该怎么整?

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

Antworte allen(1)
大家讲道理

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

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

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

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage