AngularJS页面切换参数传递

25. November 2016 笔记 0

detail.html


<div>{{students.stuId}}</div>
<div>{{students.name}}</div>
<div>{{students.sex}}</div>


list.html


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


index.html


<!DOCTYPE html>
<html  ng-app=”myApp”>
<head>
<title>Angular</title>
<script type=”text/javascript” src=”js/angular1.2.min.js”></script>
<script type=”text/javascript” src=”js/angular-route1.2.js”></script>
</head>
<style type=”text/css”>
.focu{
width: 200px;
height: 30px;
background-color: #ccc;
}
</style>
<body>
<div ng-view></div>
<div ng-repeat=”stu in students”>
<a href=”#view/{{stu.name}}”></a>
</div>
<script type=”text/javascript”>
var app=angular.module(‘myApp’, [‘ngRoute’]);
app.config([‘$routeProvider’,function($routeProvider) {
$routeProvider.
when(‘/’,{
controller:’c1′,
templateUrl:’list.html’
})
.when(‘/view/:id’,{
controller:’c2′,
templateUrl:’detail.html’
})
.otherwise({
redirectTo:’/’
})
}]);
app.controller(‘c1’, [‘$scope’, function($scope){
$scope.students=std;
}]);
app.controller(‘c2’, [‘$scope’,’$routeParams’,function($scope,$routeParams){
for(var i=0;i<std.length;i++){
if(std[i].stuId==$routeParams.id){
$scope.students=std[i];
break;
}
}
}]);
var std=[
{stuId:1000,name:”lijian”,sex:’male’},
{stuId:1001,name:”lijian1″,sex:’male1′},
{stuId:1002,name:”lijian2″,sex:’male2′},
{stuId:1003,name:”lijian3″,sex:’male3′},
{stuId:1004,name:”lijian4″,sex:’male4′}
];
</script>
</body>
</html>


Leave a Reply

Your email address will not be published. Required fields are marked *