效果图：点击 张小凡 跳到 详情页 。
1 <!DOCTYPE html>
2 <html ng-app="app" >
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>5-7-route2</title>
6 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
7 <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
8 <style type="text/css">
9 a{text-decoration:none}
10 </style>
11 </head>
12 <body>
13 <div ng-view style="background-color: #cccccc;"></div>
14 </body>
15
16 <script type="text/javascript">
17 var app=angular.module("app",['ngRoute']);
18 app.config(["$routeProvider", function ($routeProvider) {
19 $routeProvider
20 .when('/',{
21 controller:'c1',
22 templateUrl:'5-7-1.html'
23
24 })
25 .when('/view/:id',{
26 controller:'c2',
27 templateUrl:'5-7-2.html',
28 publicAccess:true
29 })
30
31 .otherwise({
32 redirectTo:'/'
33 })
34
35 }]);
36 app.controller("c1",["$scope",function ($scope) {
37
38 $scope.students=students;
39 }]);
40 app.controller("c2",["$scope","$routeParams",function ($scope,$routeParams) {
41
42
43 var h=$routeParams.id;
44
45 console.log(h);
46 console.log(typeof(h));
47 console.log(students[0].stuId == h);
48
49 for(var i=0;i<students.length;i++){
50 if(students[i].stuId==h){
51
52
53 $scope.student=students[i];
54 break;
55 }
56 }
57 }]);
58
59 var students=[
60 {stuId:'1000',name:"张小凡",sex:"男",score:60},
61 {stuId:'1001',name:"王小二",sex:"男",score:80},
62 {stuId:'1002',name:"关小羽",sex:"男",score:70},
63 {stuId:'1003',name:"欧阳笨笨",sex:"女",score:90}
64 ];
65
66
67
68 </script>
69
70 </html>
1 <div ng-repeat="stu in students" >
2 <a href="#view/{{stu.stuId}}">{{stu.name}}</a>
3 </div>
1 <div>
2 <div>学号：{{student.stuId}}</div>
3 <div>姓名：{{student.name}}</div>
4 <div>性别：{{student.sex}}</div>
5 <div>分数：{{student.score}}</div>
6 </div>
关键代码：
app.controller("c2",["$scope","$routeParams",function ($scope,$routeParams) {
var h=$routeParams.id;//在这里必须先用变量接收它才可识别
console.log(h);
console.log(typeof(h));
console.log(students[0].stuId == h);
for(var i=0;i<students.length;i++){
if(students[i].stuId==h){
$scope.student=students[i];
break;
}
}
}]);