suchen

Heim  >  Fragen und Antworten  >  Hauptteil

angular.js - angular TypeError: Cannot read property 'id' of undefined?

demo
功能描述:
在一个页面中实现学生信息浏览的功能。首先,以列表的方式显示全部学生的姓名;然后,当在列表单击某个学生姓名时,进入改学生的详细资料页。显示该学生的全部资料。
5-7.html

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

<code><!DOCTYPE html>

<html lang="en" ng-app="a5_7">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script type="text/javascript" src="../bower_components/angular/angular.min.js"></script>

    <script type="text/javascript" src="../bower_components/angular-route/angular-route.min.js"></script>

    <style>

        body{

            font-size:13px;

        }

        .show{

            background-color:#cccccc;

            padding:8px;

            width:260px;

            margin:10px 0;

        }

    </style>

</head>

<body>

 <h1>浏览学生信息的主页</h1>

<p ng-view></p>

</body>

<script type="text/javascript">

var a5_7 = angular.module('a5_7',['ngRoute']);

    a5_7.controller('c5_7_1',['$scope', function($scope){

        $scope.students = students;

 

    }]);

    a5_7.controller('c5_7_2',['$scope', function($scope,$routeParams){

        for(var i=0; i<students.length; i++){

//            console.log(students.student[i]);

            if(students[i].stuId == $routeParams.id){

 

                $scope.student = students[i];

                break;

            }

        }

    }]);

    a5_7.config(['$routeProvider', function($routeProvider){

        $routeProvider.when('/',{

            controller:'c5_7_1',

            templateUrl:'5-7-1.html'

        }).when('/view/:id',{

            controller:'c5_7_2',

            templateUrl:'5-7-2.html',

            publicAccess:true

        }).otherwise({

            redirectTo:'/'

        });

    }]);

 

    var students = [

        { stuId:1000, name:'张明明',sex:'女',score:60},

        { stuId:1001, name:'李清思',sex:'女',score:80},

        { stuId:1002, name:'刘小华',sex:'男',score:90},

        { stuId:1003, name:'陈总总',sex:'男',score:70}

    ]

</script>

</html>

</code>

5-7-1.html

1

2

3

<code><p ng-repeat="stu in students" class="show">

    <a href="#view/:id">{{stu.name}}</a>

</p></code>

5-7-2.html

1

2

3

4

5

6

<code><p class="show">

    <p>学号:{{student.stuId}}</p>

    <p>姓名:{{student.name}}</p>

    <p>性别:{{student.sex}}</p>

    <p>分数:{{student.score}}</p>

</p></code>

操作步骤:
1.先打开5-7.html
2.点击学生姓名

3.控制台报错:

这是什么原因导致的,会是这句的问题吗?href="#view/:id"

ringa_leeringa_lee2873 Tage vor984

Antworte allen(1)Ich werde antworten

  • 黄舟

    黄舟2017-05-15 17:07:25

    1

    <code> a5_7.controller('c5_7_2',['$scope', function($scope,$routeParams){//没有注入$routeParams</code>

    请更改为

    1

    <code> a5_7.controller('c5_7_2',['$scope','$routeParams', function($scope,$routeParams){</code>

    Antwort
    0
  • StornierenAntwort