angular-页面跳转传递参数
2017-04-19 16:27
387 查看
页面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参数
相关文章推荐
- angular中$state.go页面跳转并传递参数
- 页面跳转,传递中文参数的方法
- asp.net mvc 2.0页面带参数跳转以及获取传递的参数
- 从jsp页面跳转到另一个jsp页面怎么传递参数?
- JQueryMobile页面跳转参数的传递解决方案
- 11. jsp与servlet之间页面跳转及参数传递实例
- Silverlight - Xaml 和 asp.net 页面之间跳转及参数传递
- JQueryMobile页面跳转参数的传递解决方案
- asp页面新开加载页面,跳转传递参数
- HTML页面做中间页跳转传递参数
- {HTML5}JQueryMobile页面跳转参数的传递解决方案
- Silverlight之页面跳转及参数传递(9)
- wicket 之带参数传递的页面跳转
- jquerymobile页面跳转和参数传递
- Activity中使用Intent实现页面跳转与参数的传递
- LinkButton跳转页面及传递参数
- JavaScript跳转页面/Action并传递中文参数[解决js超链接传递过程中产生的中文乱码问题]
- ASP.NET页面跳转并传递参数
- WP8页面跳转实现参数传递的多种方法
- 2.response跳转: a.客户端跳转,地址栏改变; b.所有代码执行完毕后跳转; c.跳转后的页面不能使用上一个页面的request属性; d.使用地址重写传递参数(respon