<!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多页面切换传递参数的更多相关文章
	

    
								
  1. jsp页面间传递参数 中文乱码问题(zz)
		
      jsp页面间传递参数 中文乱码问题 1.传递参数 var url = "*****Test.jsp?param1="+encodeURI(encodeURI(str));//对 ...
    
		
    2. 
						
  2. ios页面间传递参数四种方式
		
    ios页面间传递参数四种方式 1.使用SharedApplication,定义一个变量来传递. 2.使用文件,或者NSUserdefault来传递 3.通过一个单例的class来传递 4.通过Dele ...
    
		
    3. 
						
  3. Angular 全局页面切换动画 me-pageloading
		
    最近看了Codrops的一篇文章, 里面讲到了一个页面切换的效果, 详情点击此处. 看了这个效果感觉很赞, 觉得这个效果可以用在angular的页面切换中, 所以将这个效果移植到angular中, 做 ...
    
		
    4. 
						
  4. JSP页面间传递参数的5种方法
		
    JSP页面间传递参数是经常需要使用到的功能,有时还需要多个JSP页面间传递参数.下面介绍一下实现的方法. (1)直接在URL请求后添加 如:< a href="thexuan.jsp? ...
    
		
    5. 
						
  5. ionic3+angular5页面间传递参数
		
    一.从一个页面跳转到另一个页面的方法 1.引入服务 import { NavController } from 'ionic-angular'; 2.初始化 constructor(public na ...
    
		
    6. 
						
  6. jsp 页面间传递参数
		
    JSP页面间传递参数是经常需要使用到的功能,有时还需要多个JSP页面间传递参数.下面介绍一下实现的方法. (1)直接在URL请求后添加 如:< a href="thexuan.jsp? ...
    
		
    7. 
						
  7. JSP页面之间传递参数的方法有哪些？
		
    JSP页面之间传递参数的方法有哪些? 解答: 1)request 2)session 3)application 4)提交表单 5)超链接
    
		
    8. 
						
  8. 在Chrome浏览器中点击链接，打开IE浏览器，跳转到指定页面并传递参数
		
    需求: 在Chrome浏览器中点击链接,打开IE浏览器,跳转到指定页面并传递参数 过程: 一些应用软件可以通过点击URL链接启动并执行操作(例如迅雷),这是如何做到的呢? 主要是通过修改注册表,注册U ...
    
		
    9. 
						
  9. 跳转页面，传递参数——android
		
    android 跳转页面并传递对象(实体类)——项目中是集港收货类 网上资料:两种传递方法Serializable,parcelable 优劣比较:Serializable数据更持久化,网络传输或数据 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 最长递增子序列hdu1087
			
    #include<map> #include<set> #include<list> #include<cmath> #include<queue ...
    
			
    2. 
						
  2. 使用OpenOffice实现各种文档转pdf或者html文档
			
    ---恢复内容开始--- 最近在做项目时需要写一个功能,将doc,ppt,xsl等文档做在线预览.网上查了很多资料,开始适用poi将文档转成pdf没成功,后来使用了OpenOffice4 + jodc ...
    
			
    3. 
						
  3. [刷题]算法竞赛入门经典(第2版) 4-5/UVa1590 - IP Networks
			
    书上具体所有题目:http://pan.baidu.com/s/1hssH0KO 代码:(Accepted,0 ms) //UVa1590 - IP Networks #include<iost ...
    
			
    4. 
						
  4. 开启MongoDB客户端访问控制
			
    参考官方文档:https://docs.mongodb.org/v2.6/tutorial/enable-authentication/ 基于版本:MongoDB 2.6 概览 在MongoDB数据实 ...
    
			
    5. 
						
  5. 原型(Prototype)模式
			
    原型模式属于对象的创建模式.通过给出一个原型对象来指明所有创建的对象的类型,然后用复制这个原型对象的办法创建出更多同类型的对象.这就是原型模式的用意.原型模式的结构 原型模式要求对象实现一个可以“克隆 ...
    
			
    6. 
						
  6. RabbitMQ学习-1
			
    转载自:http://blog.csdn.net/anzhsoft/article/details/19563091. 1. 历史 RabbitMQ是一个由erlang开发的AMQP(Advanced ...
    
			
    7. 
						
  7. JS解决通过按钮切换图片的问题
			
    我是JS初学者,本想通过JS解决轮播图的特效,上网看了下:大部分都是JQ解决的,对于初学者的我来说理解上有点困难.于是我自己只做了一个不那么高大上的JS轮播图,下面我简单介绍下我的步骤:在HTML中创 ...
    
			
    8. 
						
  8. PHP面向对象之解释器模式
			
    在博客园逛了1年多,从来都是看文章但没发表过什么文章.主要是因为技术太菜了,只有学习的份,自己那点水平实在也没什么好去分享的.但是最近在看 “深入PHP面向对象模式与实践” ,学习书中的内容后瞬间觉得 ...
    
			
    9. 
						
  9. 【JAVAWEB学习笔记】14_response
			
    HttpServletResponse 学习目标 案例一.完成文件下载 案例二.生成验证码(了解) 1．HttpServletResponse概述 我们在创建Servlet时会覆盖service()方 ...
    
			
    10. 
						
  10. GirdView分页
			
    给gridview增加以下时间,即可 设置pageindex 重新绑定数据 protected void GvMenu_PageIndexChanging(object sender, GridVie ...
    
			
    11.