通过路由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开始。

 

posted @   saucxs  阅读(3936)  评论(0编辑  收藏  举报
编辑推荐:
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示