您的位置：首页 > Web前端 > AngularJS

angular多页面切换传递参数

2016-12-28 17:17 323 查看 
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../js/angularjs.js"></script>
<script src="../js/angular-route.min.js"></script>
<style type="text/css">
body{
font-size: 32px;
}
.show{
background: #eeeeee;
padding: 8px;
width: 500px;
margin:8px 0px;
}
</style>
</head>
<body>
<div>
<div ng-view></div>
</div>
</body>
<script>
var app=angular.module('myapp',['ngRoute']);
app.controller('sub1',function($scope){
$scope.students=students;
});
app.controller('sub2',function($scope,$routeParams){
for (var i = 0;i<students.length;i++) {
if(students[i].stuId==$routeParams.id){
$scope.dd=students[i];
break;
}

}
});
app.config(function($routeProvider) {
$routeProvider
.when('/',{
controller:"sub1",
templateUrl:"sub1.html"
})
.when('/view/:id',{
controller:"sub2",
templateUrl:"sub2.html",
publicAccess:true
})
.otherwise({ redirectTo: '/' });
});
var students=[
{stuId:1,name:"张三1",sex:"女1",score:121},
{stuId:2,name:"张三2",sex:"女2",score:122},
{stuId:3,name:"张三3",sex:"女3",score:123},
{stuId:4,name:"张三4",sex:"女4",score:124}
]
</script>
</html>


[b]<!--sub.html-->[/b]
<div ng-repeat="x in students" class="show">
<a href="#view/{{x.stuId}}">{{x.name}}</a>
</div>


[b]<!--sub2.html-->
[/b]


<div class="show">
<div>学号:{{dd.stuId}}</div>
<div>姓名:{{dd.name}}</div>
<div>性别:{{dd.sex}}</div>
<div>分数:{{dd.score}}</div>
</div>





                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航