如何使用AngularJS读取url查询参数?

时间:2014-12-13 05:59:00

标签: angularjs

我想使用AngularJS获取特定url参数的值。然后我想为特定的文本框分配一个特定的值。

示例网址可能如下所示:

http://example.com/?param1=value1

我见过有关$ location,路由和服务的示例。我不想做任何这些。我只需要param1的值。有什么想法可以做到吗?

这是一个相应的jsfiddle.net,有几次尝试:http://jsfiddle.net/PT5BG/211/

3 个答案:

答案 0 :(得分:2)

使用$ location是有角度的方式

如果html5mode = true

$location.search().param1;应该给它

否则你必须使用纯JavaScript。检查一下。 How can I get a specific parameter from location.search?

答案 1 :(得分:1)

如果您使用的是ngRoute,请查找routeParams

如果您使用ui-Router,请查找stateParams

JS方式:

var key = 'param1';
var value = window.location.search.substring(window.location.search.indexOf(key)+key.length+1);

答案 2 :(得分:0)

试试这个。你需要在角度js中路由概念

  <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>AngularJS Routes example</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
    </head>

    <body ng-app="sampleApp">

    <a href="#/route1/abcd">Route 1 + param</a><br/>
    <a href="#/route2/1234">Route 2 + param</a><br/>

    {{param}}
    <div ng-view></div>

    <script>
        var module = angular.module("sampleApp", ['ngRoute']);

        module.config(['$routeProvider',
            function($routeProvider) {
                $routeProvider.
                        when('/route1/:param', {
                            templateUrl: 'your_url1',
                            controller: 'RouteController'
                        }).
                        when('/route2/:param', {
                            templateUrl: 'your_url2',
                            controller: 'RouteController'
                        }).
                        otherwise({
                            redirectTo: '/'
                        });
            }]);

        module.controller("RouteController", function($scope, $routeParams) {
            $scope.param = $routeParams.param;
            alert($scope.param);
        })
    </script>        

    </body>
    </html>  

$ routeParams允许你输入参数

的值