<!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. CSS3 制作网格动画效果
			
    在线演示      源码下载
    
			
    2. 
						
  2. openwrt通过libcurl上传图片，服务器端通过PHP接收文件
			
    一.客户端文件上传 libcurl上传文件有两种方式: 1.直接上传文件,类似form表单<input type=”file” />,<form enctype=”multipart ...
    
			
    3. 
						
  3. Unity 多屏（分屏）显示，Muti_Display
			
    Unity 多屏(分屏)显示,Muti_Display  最近项目有个需求,主要用于在展厅的展示游戏. 比如,在一个很大的展厅,很大的显示屏挂在墙上,我们不可能通过操作墙上那块显示器上的按钮来控制游戏 ...
    
			
    4. 
						
  4. Ubuntu14.04双网卡主备配置
			
    近日有个需求,交换机有两台,做了堆叠,服务器双网卡,每个分别连到一台交换机上.这样就需要将服务器的网卡做成主备模式,以增加安全性,使得当其中一个交换机不通的时候网卡能够自动切换. 整体配置不难,网上也 ...
    
			
    5. 
						
  5. Layout基本属性总结
			
    在Android中,共有五种布局方式,分别是:FrameLayout(框架布局),LinearLayout (线性布局),GridLayout(网格布局),RelativeLayout(相对布局),T ...
    
			
    6. 
						
  6. 画地为Mask，随心所欲的高效遮罩组件[Unity]
			
    在上一篇博文"扔掉遮罩,更好的圆形Image组件"中,笔者改变Image的顶点数据,使得Image呈圆形显示,避免了Mask的使用,从而节省Drawcall消耗,提高渲染效率了.这 ...
    
			
    7. 
						
  7. eclipse中集成hadoop插件
			
    1.下载并安装eclipse2.https://github.com/winghc/hadoop2x-eclipse-plugin3.下载插件到eclipse的插件目录 4.配置hadoop安装目录  ...
    
			
    8. 
						
  8. 手机共享成wifi热点电脑无法上网的问题
			
    第二次遇到这样的问题,每次百度都不能解决我遇到的问题.上一次已经自己鼓捣着解决了,后来忘记怎么弄好的.第二次遇到这个问题,又是浪费了许多时间后,偶然弄好了,突然想起来上次就是这样弄好的.所以就针对我自 ...
    
			
    9. 
						
  9. Springmvc+mybatis+restful+bootstrap框架整合
			
    框架整合: Springmvc + Mybatis + Shiro(权限) + REST(服务) + WebService(服务) + JMS(消息) + Lucene(搜搜引擎) + Quartz( ...
    
			
    10. 
						
  10. 面试(4)-spring-Spring面试题和答案
			
    1:69道Spring面试题和答案 转自:http://ifeve.com/spring-interview-questions-and-answers/ 目录 Spring 概述 依赖注入 Spri ...
    
			
    11.