原理：

　　1.在a标签跳转时，连接后增加一个参数值

　　2.在路由中接收

　　3.在控制器中接收

实现：

1.<a href="#/list/{{val.id}}">

2.在js的config中写入：

.when('/list/:id', {
          templateUrl: 'views.route.detail.html',
          controller: 'RouteDetailCtl'
      })

3.angular中使用routeParams传递参数.

在controller中直接使用：

.controller('RouteDetailCtl',function($scope, $routeParams) {
    $scope.id = $routeParams.id;
})

就可以在接收页面获得id的值。

代码：

HTML片段：

<body ng-app="ngRouteExample" class="ng-scope">

    <script type="text/ng-template" id="views.route.detail.html">

      <h1> about</h1>

      <span style="color:#ff6666;"><h1>{{id}}</h1></span>

  </script>  

  <script type="text/ng-template" id="embedded.home.html">

      <h1> Home </h1>

  </script>  

  <script type="text/ng-template" id="embedded.about.html">

      <h1> About </h1>

      <span style="color:#ff6666;"><li ng-repeat="id in ID">

        <a href="#/list/{{ id }}"> ID{{ id }}</a>

      </li></span>

  </script>  

  <div>

    <div id="navigation">

      <a href="#/home">Home</a>

      <a href="#/about">About</a>

    </div>  

    <div ng-view="">

    </div>

  </div>

</body>

js片段：

<script type="text/javascript">

angular.module('ngRouteExample', ['ngRoute'])

.controller('HomeController', function ($scope, $route) { $scope.$route = $route;})

.controller('AboutController', function ($scope, $route) { $scope.$route = $route;$scope.ID = [1,2,3];})

.controller('RouteDetailCtl',function($scope, $routeParams) {

    $scope.id = $routeParams.id;

})

.config(function ($routeProvider) {

    $routeProvider
　　.when('/home', {

        templateUrl: 'embedded.home.html',

        controller: 'HomeController'

    })
　　.when('/about', {

        templateUrl: 'embedded.about.html',

        controller: 'AboutController'

    })
　　.when('/list/:id', {

          templateUrl: 'views.route.detail.html',

          controller: 'RouteDetailCtl'

      })
　　.otherwise({

        redirectTo: '/home'

    });

});

</script>

转载自：http://blog.csdn.net/it_huge/article/details/52441652。

angularjs之向下一个页面传参的更多相关文章

  1. jQuery 向另一个页面传参，同时跳转到该页面

    为了使参数能够传递到另外一个页面,使用ajax的跳转方式 $.ajax({ type: "POST", url:"/admin/sysjgl/sysjck/sjcs&qu ...

  2. AngularJS中页面传参方法

    1.基于ui-router的页面跳转传参 (1) 用ui-router定义路由,比如有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的 ...

  3. 关于页面传参，decodeURI和decodeURIComponent

    之前写过一个关于页面传参的,但是是前端相对于自己的页面做的跳转,也就是页面1,跳转到页面2,里面带的参数.这里可以参考我上一篇文章,包括里面参数中如果有数组和json格式的情况.但是需要注意的是,我前 ...

  4. 用js把数据从一个页面传到另一个页面

    用js把数据从一个页面传到另一个页面的层里? 如果是传到新页面的话,你网站基于什么语言开发直接用get或者post获取,然后输出到这个层 通过url传参 如果是HTML页面的话JS传到新页面就wind ...

  5. vue 通过 name 和 params 进行调整页面传参刷新参数丢失问题&vue路由可选参数

    vue  通过 name 和 params 进行调整页面传参刷新参数丢失问题 router.js: export default new Router({ routes: [ { path: '/', ...

  6. Strut2页面传参跳转 --Struts2

    1.本案例借助struts2框架,完成页面传参.跳转功能 2.代码实现 index.jsp: <form action="helloStruts2.action" metho ...

  7. .net 页面传参方式总结

    一.使用Querystring Querystring是一种非常简单的传值方式,其缺点就是:安全性低.会把要传送的值显示在浏览器的地址栏中(也就是不需要保密得参数),并且在此方法中不能够传递对象,参数 ...

  8. FastAdmin 前端页面传参笔记

    FastAdmin 前端页面传参笔记 看到 QQ 群里的小伙伴询问如何传参,然后在社区里找到一笔记帖子 1 还要参考在线文档控制器部分2. 引用 Karson 的回复: 如果我们需要自己在控制器中透传 ...

  9. request设置属性 一般当做下一个页面的结果集

    request设置属性 一般当做下一个页面的结果集

随机推荐

  1. 折腾 Phalcon 的笔记

    不要用 IIS!Apache 万岁! 不要用 Web Platform Installer!自己动手丰衣足食! 注意版本号.TS 与 NonTS.x86 与 x64 的区别! 关于 Apache 的配 ...

  2. HihoCoder 1044 垃圾清理 （优化：状态压缩）

    状态压缩·一 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho在兑换到了喜欢的奖品之后,便继续起了他们的美国之行,思来想去,他们决定乘坐火车前往下一座城市— ...

  3. Jsp邮件找回密码全攻略

    [来源网络  http://www.2cto.com/kf/201502/376374.html] 一般大型网站我们登录的时候,密码忘了都有个功能可以找回密码. 细数下大致的方法: 1.直接把密码发送 ...

  4. 每天一个linux命令（文件操作）：【转载】find命令之xargs

    在使用 find命令的-exec选项处理匹配到的文件时, find命令将所有匹配到的文件一起传递给exec执行.但有些系统对能够传递给exec的命令长度有限制,这样在find命令运行几分钟之后,就会出 ...

  5. <context:annotation-config/>,<context:component-scan/>,<mvc:annotation-driven/>区分

    链接:http://blog.csdn.net/baple/article/details/16864175 链接:http://blog.csdn.net/Baple/article/details ...

  6. bzoj 4827 礼物

    bzoj 4827 礼物 可以看做将其中一个数列(假定为 \(a\) )都加上 \(c\) , \(c\) 可以为负数.易知这里 \(-m\leq c\leq m\). 记要求的答案为 \(ans\) ...

  7. cv.Mat 与 .txt 文件数据的读写操作

    1.按OpenCV格式实现的 .txt 文件读写 可以用 cvSave 和 cvLoad 实现,格式和 .xml/.yml 的差不多,不过如果专用与 OpenCV 的数据读写,还是用  .xml/.y ...

  8. Kanboard 看板工具配置使用

    备注:     类似的开源工具有wekan 界面还有功能和Trello 类似.比较方便   1. 安装(基于docker+ docker-compose) a. 安装docker && ...

  9. 使用AWK分析Oracle系统锁定、Hang状态

    在早期Oracle版本中,由于技术不成熟等原因,数据库锁定和僵死状态还是时有发生的.对待这些问题,老先生们的处理策略无外乎是“重启”和“考究”两种策略.所谓“重启”,通过强制的重启服务器或者数据库,将 ...

  10. VMware虚拟机克隆CentOS 6.5后网卡修改方法

    VMware虚拟机安装好CentOS6.5系统后,纯净的系统多克隆几份出来方便后期做试验.克隆步骤很简单,克隆后出现的问题是克隆后的网卡MAC地址和原系统MAC地址一样,在局域网内会有冲突,需要更改克 ...