angular-页面跳转传递参数

最新推荐文章于 2023-10-09 16:39:16 发布

Mars-xq

最新推荐文章于 2023-10-09 16:39:16 发布

阅读量6.6k

点赞数

分类专栏： angularjs angularjs

本文链接：https://blog.csdn.net/sinat_31057219/article/details/70242235

版权

angularjs 同时被 2 个专栏收录

38 篇文章 0 订阅

订阅专栏

angularjs

37 篇文章 0 订阅

订阅专栏

页面1：传递参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../angular.js"></script>
</head>
<body ng-app="myAppGoTo1" ng-controller="myCtrlGoTo1">
<button ng-click="goTo()">跳转到page2，并携带参数</button>

<script>
    var app = angular.module("myAppGoTo1", []);

    app.controller("myCtrlGoTo1", function ($scope) {
        $scope.goTo = function () {
            var id = 100;
            var name = "zhangsan";
            var person = {firstname: "John", lastname: "Doe", age: 50, eyecolor: "blue"};//对象
            location.href = "page2.html?id=" + id + "&name=" + name + "&person=" + angular.toJson(person);
        }
    });
</script>
</body>
</html>

页面二：获取参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../angular.js"></script>
</head>
<body ng-app="myAppGoTo2" ng-controller="myCtrlGoTo2">
<button ng-click="get1()">$location.search()获取page1传过来的参数</button>
<button ng-click="get2()">location.search:replace获取page1传过来的参数</button>
<button ng-click="get3()">location.search:subStr获取page1传过来的参数</button>

<script>
    var app = angular.module("myAppGoTo2", []);

    //$location.search()需要此配置
    app.config(['$locationProvider', function ($locationProvider) {
        $locationProvider.html5Mode({
            enabled: true,
            requireBase: false
        });
    }]);

    app.controller("myCtrlGoTo2", function ($scope, $location) {
        $scope.get1 = function () {
            console.log("$location.search()===" + $location.search());//[object Object]
            console.log("$location.search()类型===" + typeof $location.search());//object
            if ($location.search().id) {
                console.log("id======" + $location.search().id);
                console.log("id类型======" + typeof $location.search().id);//string
            }
            if ($location.search().name) {
                console.log("name======" + $location.search().name);
                console.log("name类型======" + typeof $location.search().name);//string
            }
            if ($location.search().person) {
                console.log("person======" + $location.search().person);
                console.log("person类型======" + typeof $location.search().person);//string
                //$location.search()获取的都是字符串，如果想得到对象需要再次转换
                console.log("person======" + angular.fromJson($location.search().person));
                console.log("person类型======" + typeof angular.fromJson($location.search().person));
            }
        };

        $scope.get2 = function () {
            var searchStr = location.search;
            var searchArr = searchStr.split("&");
            var id = searchArr[0].replace("?id=", "");//string
            var name = searchArr[1].replace("name=", "");//string
            var person = decodeURI(searchArr[2].replace("person=", ""));//decodeURI解码，string

            console.log("location.search====" + searchStr);//?id=100&name=zhangsan
            console.log("location.search类型====" + typeof searchStr);//string
            console.log("id====" + id);
            console.log("id类型====" + typeof id);
            console.log("name====" + name);
            console.log("name类型====" + typeof name);
            console.log("person====" + person);
            console.log("person类型====" + typeof person);
            //location.search获取的都是字符串，如果想得到对象需要再次转换
            console.log("person====" + angular.fromJson(person));
            console.log("person类型====" + typeof angular.fromJson(person));
        };

        $scope.get3 = function () {
            var searchStr = location.search;
            console.log("location.search====" + searchStr);//?id=100&name=zhangsan
            console.log("location.search类型====" + typeof searchStr);//string
            var paramsStr = searchStr.substr(searchStr.indexOf("?") + 1);//先去掉？
            var paramsArr = paramsStr.split("&");//再以&分割成数组
            var id = paramsArr[0].substr(paramsArr[0].indexOf("=") + 1);
            var name = paramsArr[1].substr(paramsArr[1].indexOf("=") + 1);
            var person = decodeURI(paramsArr[2].substr(paramsArr[2].indexOf("=") + 1));//decodeURI解码，string

            console.log("location.search====" + searchStr);//?id=100&name=zhangsan
            console.log("location.search类型====" + typeof searchStr);//string
            console.log("id====" + id);
            console.log("id类型====" + typeof id);
            console.log("name====" + name);
            console.log("name类型====" + typeof name);
            console.log("person====" + person);
            console.log("person类型====" + typeof person);
            //location.search获取的都是字符串，如果想得到对象需要再次转换
            console.log("person====" + angular.fromJson(person));
            console.log("person类型====" + typeof angular.fromJson(person));
        }
    });
</script>
</body>
</html>

参考：

【更新】AngularJs $location获取url参数

Mars-xq

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
angular-页面跳转传递参数

页面1：传递参数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../angular.js"></script></head><body ng-app="myAppGoTo1" ng-controller="myCtrlGoTo
复制链接

扫一扫