26.路由2

效果图：点击张小凡跳到详情页。

 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>

5-7

1 <div ng-repeat="stu in students" >
2     <a href="#view/{{stu.stuId}}">{{stu.name}}</a>
3 </div>

5-7-1

1 <div>
2     <div>学号：{{student.stuId}}</div>
3     <div>姓名：{{student.name}}</div>
4     <div>性别：{{student.sex}}</div>
5     <div>分数：{{student.score}}</div>
6 </div>

5-7-2

关键代码：

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;
       }
   }
}]);