通过路由url携带参数进行参数传递
一、url解析参数
在路由中写入,同一个控制器,同一个页面模板,可以写多个路由,不同的路由对应相同的页面,只是在这种传参数的状态下的特定页面。
.state("OrderRecord", {
parent: "ServiceManage",
url: "/order-record",
templateUrl: "partials/service/transaction/order-record.html",
controller: "OrderRecordCtrl"
})
.state("OrderRecordQuery", {
parent: "ServiceManage",
// params: {"orderStatus":null},
url: "/order-record/orderStatus/?:orderStatus/:startTime/:endTime",
templateUrl: "partials/service/transaction/order-record.html",
controller: "OrderRecordCtrl"
})
在模板里,再跳转的ui-sref里的写的是state的状态,增加target,新开页。
<div class="link-num-mar">
<a class="link-num" ng-class="{'un-click':main.newOrdersCnt===0}" ui-sref="OrderRecordQuery({orderStatus: main.orderQueryParam.orderStatus,startTime: main.orderQueryParam.startTime,endTime:main.orderQueryParam.endTime})" target="_blank">
{{main.newOrdersCnt}}
</a>
</div>
PS:1、ng-class是针对于后端返回的数值,如果数值为0,不可点击的需求。不可点击使用属性pointer-event:none。
在目的地页面控制器js里进行url解析,在初始化的时候,进行解析
function init() {
if($scope.url.indexOf('orderStatus')>=0){
$scope.orderParam.orderStatus = $scope.url.split('=')[1].split('&')[0];
$scope.orderParam.startTime = $scope.url.split('=')[2].split('&')[0];
$scope.orderParam.endTime = $scope.url.split('=')[3].split('&')[0];
$scope.startTime = $scope.url.split('=')[2].split('&')[0];
$scope.endTime = $scope.url.split('=')[3].split('&')[0];
// console.log($scope.orderParam.endTime);
$scope.orderParam.pageSize=$scope.pageSize;
$scope.orderParam.pageNumber=$scope.pageNumber;
TransactionService.getAllOrderCase($scope.orderParam).then(function(result) {
$scope.orderRecords = result.datas;
$scope.totalCount = result.totalDataCount;
$scope.totalOrder = result.totalDataCount;
});
}else{
$scope.orderParam.pageSize=$scope.pageSize;
$scope.orderParam.pageNumber=$scope.pageNumber;
TransactionService.getAllOrderCase($scope.orderParam).then(function (result) {
$scope.orderRecords = result.datas;
$scope.totalCount = result.totalDataCount;
$scope.totalOrder = result.totalDataCount;
});
}
};
PS:1、通过url中是否传了传的标志位orderStatus,函数indexof('orderStatus')>=0,表示含有这个标志位
2、split函数,对字符串进行分割,split('='),从字符串从左至右的第一个‘=’进行分割,分成数组,如果有1个‘=’就是分成两个数组,‘=’之后为一个数组,‘=’之前包括‘=’为一个数组,split('=')[1],表示取‘=’之后的数组,因为js数组初始值从0开始。
通过路由url携带参数进行参数传递的更多相关文章
- fileinput URL携带参数的问题,uploadExtraData,Bootstrap
因为无法在URL中执行其他代码,通过阅读文档可知可以由uploadExtraData参数携带数据.于是在这里携带,如果uploadExtraData 无法接收到数据,一般是格式有误, 先尝试这个简单的 ...
- 每天一点点之vue框架开发 - vue-router路由在循环中携带参数
场景:要实现一个标签云,通过循环把标签渲染,然后单击标签的时候实现跳转,跳转路由一样,通过唯一参数来实现请求不同的数据 因此,就需要在for循环中来携带参数,本节所讲的是路由使用对象的形式(别名)来实 ...
- VUE路由携带参数的三种方式
vue 通过路由在进行页面跳转时,会经常携带参数用于同步页面间的数据 路由中携带参数的方式总结如下: 路由定义示例: { name: 'list', path: '/list', component: ...
- $Django 路飞之小知识回顾,Vue之样式element-ui,Vue绑定图片--mounted页面挂载--路由携带参数
一 小知识回顾 1 级联删除问题 2 一张表关联多个表,比如有manytomanyfileds forignkey,基于对象查询存在的问题:反向查询的时候 表名小写_set.all()不知是哪个字段 ...
- vue不通过路由直接获取url中参数的方法示例
vue不通过路由直接获取url中参数的方法示例 vuejs取得URL中参数的值地址:http://localhost:3333/#/index?id=128console.log(this.$rout ...
- 用RestTemplate调取接口,取得返回数据,携带header,动态拼接url ,动态参数
记录我自己的工作 get 请求 ,携带 请求头 header (token) url 根据参数 动态拼接 参数 放入 map 动态拼接 private String lclUrl = &quo ...
- 通知url必须为直接可访问的url,不能携带参数 异步接收微信支付结果通知的回调地址 不能携带参数。 回调地址后是否可以加自定义参数 同步回调地址 异步回调地址 return_url和notify_url的区别
[微信支付]微信小程序支付开发者文档 https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_7 通知url必须为直接可访问的 ...
- angular6 路由拼接查询参数如 ?id=1 并获取url参数
angular6 路由拼接查询参数如 ?id=1 并获取url参数 路由拼接参数: <div class="category-border" [routerLink]=&qu ...
- jquery 获取url携带的参数
url= "/page/employee/employeeUpdate.html?id="+data.id 获取 url携带的参数 -> $.getUrlParam = fu ...
随机推荐
- C# 中英文符号互转
/// 转全角的函数(SBC case) /// ///任意字符串 /// 全角字符串 /// ///全角空格为12288,半角空格为32 ///其他字符半角(33 ...
- 【玩转树莓派】使用 sinopia 搭建私有 npm 服务器
简介 使用 sinopia 的好处是,node系的工程师,内部协作时,使用自有 npm 包,会非常方便:另外,sinopia,会缓存已经下载过的包,可以在相当程度上,加速 npm install 相关 ...
- 设计模式-模板方法模式(Head First)
参考书籍:Head First设计模式 什么是模板方法模式 定义:在一个方法中定义一个算法的骨架,而将一些步骤延迟到子类中.模板方法使得子类可以在不改变算法结构的情况下,重新定义算法中的某些步骤. 怎 ...
- iOS项目的命名规范
一.关于本文档1.本文档的书写目的 <iOS项目的命名规范>的书写目的,在于让后续参加到该项目的iOS开发人员通过阅读该文档,了解在当前iOS项目的代码中的命名要求并严格按照本文档执 ...
- react 体验 react与vue的比较
用了 vue 大半年了,不过我在2016年暑假的时候就看到了 react 这个项目,有点想学习一番,之前学习的都是基础语法和一些基础用法吧,总的来说 mvvm 框架确实都很相似,会一个就可以了; 今天 ...
- 企业级应用TOMCAT
第1章 Tomcat 1.1 Tomcat简介 Tomcat是一个免开放源代码的Web应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不多的场合下被普遍使用,是开发调试JSP程序的首选,另 ...
- 【MAVEN】maven系列--pom.xml标签详解
pom文件作为MAVEN中重要的配置文件,对于它的配置是相当重要.文件中包含了开发者需遵循的规则.缺陷管理系统.组织.licenses.项目信息.项目依赖性等.下面将重点介绍一下该文件的基本组成与功能 ...
- jQuery操作input改变value属性值
今天写了一个表单元素,在用户点击的时候会清空input中的内容,当鼠标点击其他地方的时候会把输入的值保存为input的value值 类似于这样的效果 当用户点击的时候文字消失. html代码 < ...
- [LeetCode] N皇后问题
LeetCode上面关于N皇后有两道题目:51 N-Queens:https://leetcode.com/problems/n-queens/description/ 52 N-Queens II: ...
- 在使用ajax实现三级联动调用数据库数据并通过调出的数据进行二级表单查询
在使用ajax实现三级联动查询数据库数据后再使用ajax无刷新方式使用三级联动调出的数据进行二级查询 但是现在遇到问题,在二级查询的时候期望是将数据以表格的形式展示在三级联动的下方,但是现在在查询后会 ...