Heim > Fragen und Antworten > Hauptteil
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"
黄舟2017-05-15 17:07:25
1 |
|
请更改为
1 |
|