AngularJS页面带参跳转及参数解析操作示例

 更新时间:2017年06月28日 10:37:42   作者:小魏的马仔  
这篇文章主要介绍了AngularJS页面带参跳转及参数解析操作,结合具体实例形式分析了AngularJS使用URL传递参数及参数的接收、解析等相关操作技巧,需要的朋友可以参考下

本文实例讲述了AngularJS页面带参跳转及参数解析操作。分享给大家供大家参考,具体如下:

页面带参跳转

$scope.LoginSucessLocation = function () {
  var hre = 'http://ctb.qingguo.com/weixinCt/main#/upload_topic_start?uid=' + $scope.uid + '&orgcode=' + $scope.orgCode;
  location.href = hre;
}

在url的后面,增加?,然后直接带参数。

参数解析

controller声明要增加$location的注入

app.controller('loginCtrl', function ($scope, $http, $interval, $cookies, $location, userService) {
  var absUrl = $location.absUrl();
  function UrlSearch() {
    var name, value;
    var str = location.href; //取得整个地址栏
    var num = str.indexOf("?");
    str = str.substr(num + 1); //取得所有参数  stringvar.substr(start [, length ]
    var arr = str.split("&"); //各个参数放到数组里
    for (var i = 0; i < arr.length; i++) {
      num = arr[i].indexOf("=");
      if (num > 0) {
        name = arr[i].substring(0, num);
        value = arr[i].substr(num + 1);
        this[name] = value;
      }
    }
  }
  var Request = new UrlSearch(); //实例化
  alert("Request.orgid = "+ Request.orgid);
})

从Request 中,通过键值获取出来的值,就是url带的参数,直接用即可。

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结

希望本文所述对大家AngularJS程序设计有所帮助。

相关文章

  • angular父子组件通信详解

    angular父子组件通信详解

    这篇文章主要为大家介绍了angular父子组件通信,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • 详解Webstorm 下的Angular2.0开发之路(图文)

    详解Webstorm 下的Angular2.0开发之路(图文)

    这篇文章主要介绍了详解Webstorm 下的Angular2.0开发之路(图文) ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 利用Angular2的Observables实现交互控制的方法

    利用Angular2的Observables实现交互控制的方法

    这篇文章主要介绍了利用Angular2的Observables实现交互控制的方法,我们主要针对一些在跟服务器端交互的时候遇到的问题,来看看Observable给我们带来的特性。感兴趣的可以了解一下
    2018-12-12
  • Angular中ng update命令force参数含义详解

    Angular中ng update命令force参数含义详解

    这篇文章主要为大家介绍了Angular中ng update命令force参数含义详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • angularjs结合html5实现拖拽功能

    angularjs结合html5实现拖拽功能

    本篇文章给大家分享了angularjs结合html5实现拖拽功能的方法以及代码实例,有兴趣的朋友参考下。
    2018-06-06
  • AngularJS基础 ng-mouseleave 指令详解

    AngularJS基础 ng-mouseleave 指令详解

    本文主要介绍AngularJS ng-mouseleave 指令,这里帮大家整理了ng-mouseleave指令的详细资料,并附有代码示例,有需要的小伙伴可以参考下
    2016-08-08
  • AngularJS中重新加载当前路由页面的方法

    AngularJS中重新加载当前路由页面的方法

    下面小编就为大家分享一篇AngularJS中重新加载当前路由页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Angular脚手架开发的实现步骤

    Angular脚手架开发的实现步骤

    这篇文章主要介绍了Angular脚手架开发的实现步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Angular本地存储安全分析详解

    Angular本地存储安全分析详解

    这篇文章主要为大家介绍了Angular本地存储安全分析详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • Angular5中调用第三方js插件的方法

    Angular5中调用第三方js插件的方法

    下面小编就为大家分享一篇Angular5中调用第三方js插件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02

最新评论