angularjs之向下一个页面传参
原理:
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之向下一个页面传参的更多相关文章
- jQuery 向另一个页面传参,同时跳转到该页面
为了使参数能够传递到另外一个页面,使用ajax的跳转方式 $.ajax({ type: "POST", url:"/admin/sysjgl/sysjck/sjcs&qu ...
- AngularJS中页面传参方法
1.基于ui-router的页面跳转传参 (1) 用ui-router定义路由,比如有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的 ...
- 关于页面传参,decodeURI和decodeURIComponent
之前写过一个关于页面传参的,但是是前端相对于自己的页面做的跳转,也就是页面1,跳转到页面2,里面带的参数.这里可以参考我上一篇文章,包括里面参数中如果有数组和json格式的情况.但是需要注意的是,我前 ...
- 用js把数据从一个页面传到另一个页面
用js把数据从一个页面传到另一个页面的层里? 如果是传到新页面的话,你网站基于什么语言开发直接用get或者post获取,然后输出到这个层 通过url传参 如果是HTML页面的话JS传到新页面就wind ...
- vue 通过 name 和 params 进行调整页面传参刷新参数丢失问题&vue路由可选参数
vue 通过 name 和 params 进行调整页面传参刷新参数丢失问题 router.js: export default new Router({ routes: [ { path: '/', ...
- Strut2页面传参跳转 --Struts2
1.本案例借助struts2框架,完成页面传参.跳转功能 2.代码实现 index.jsp: <form action="helloStruts2.action" metho ...
- .net 页面传参方式总结
一.使用Querystring Querystring是一种非常简单的传值方式,其缺点就是:安全性低.会把要传送的值显示在浏览器的地址栏中(也就是不需要保密得参数),并且在此方法中不能够传递对象,参数 ...
- FastAdmin 前端页面传参笔记
FastAdmin 前端页面传参笔记 看到 QQ 群里的小伙伴询问如何传参,然后在社区里找到一笔记帖子 1 还要参考在线文档控制器部分2. 引用 Karson 的回复: 如果我们需要自己在控制器中透传 ...
- request设置属性 一般当做下一个页面的结果集
request设置属性 一般当做下一个页面的结果集
随机推荐
- 【剑指offer】二叉搜索树转双向链表,C++实现
原创博文,转载请注明出处! # 题目 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向. 二叉树节点的定义 struct TreeNod ...
- BZOJ3529 [Sdoi2014]数表【莫比乌斯反演】
Description 有一张 n×m 的数表,其第 i 行第 j 列(1 <= i <= n, 1 <= j <= m)的数值为 能同时整除 i 和 j 的所有自然数之和.给 ...
- BZOJ4566 Haoi2016 找相同字符【广义后缀自动机】
Description 给定两个字符串,求出在两个字符串中各取出一个子串使得这两个子串相同的方案数.两个方案不同当且仅当这两 个子串中有一个位置不同. Input 两行,两个字符串s1,s2,长度分别 ...
- ajax 上传读取excel
$("#btnImport").click(function () { $("#File").click() })///委托 $("#File&quo ...
- 【DUBBO】 Dubbo生成的设配类
package com.alibaba.dubbo.rpc;import com.alibaba.dubbo.common.extension.ExtensionLoader;public class ...
- Maven中plugins和pluginManagement的区别
pluginManagement是表示插件声明,即你在项目中的pluginManagement下声明了插件,Maven不会加载该插件,pluginManagement声明可以被继承. pluginMa ...
- CentOS 6.8 源码安装mysql 5.6
一:卸载旧版本 rpm -qa | grep mysql rpm -e mysql #普通删除模式 rpm -e --nodeps xxx(xxx为刚才的显示的列表) # 强力删除模式,如果使用上面命 ...
- EditPlus 3.41 p1115 0728注册码
EditPlus (2012-7-28 epp341p1115_0728) 注册码: 注册名:Free User 注册码:6AC8D-784D8-DDZ95-B8W3A-45TFA 注册名:Www.S ...
- js写的体彩足球预测分析
最近室友在玩世界杯的预测,我顺手写点分析:下面直接给出代码,很简单的,拷贝代码直接存为html文件就可以了.---------mq0036 说明下:需要你自己去找个Jquery引用到当前页面就可以了 ...
- 笔记:webpack 打包参数 mode development
webpack 打包参数 mode development 在开发时使用 webpack 打包后不压缩,所以只需要在 webpack 打包命令中加上 --mode mode development 即 ...