码迷,mamicode.com
首页 > 其他好文 > 详细

angular多页面切换传递参数

时间:2016-12-28 20:04:52      阅读:239      评论:0      收藏:0      [点我收藏+]

标签:log   template   redirect   ram   access   char   config   name   oct   

<!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>


<!--sub.html-->
<div ng-repeat="x in students" class="show"> <a href="#view/{{x.stuId}}">{{x.name}}</a> </div>
<!--sub2.html-->
<div class="show">
    <div>学号:{{dd.stuId}}</div>
    <div>姓名:{{dd.name}}</div>
    <div>性别:{{dd.sex}}</div>
    <div>分数:{{dd.score}}</div>
</div>

 

 

angular多页面切换传递参数

标签:log   template   redirect   ram   access   char   config   name   oct   

原文地址:http://www.cnblogs.com/null11/p/6230235.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!