javascript - How to append query string to url in AngularJS? - Stack Overflow

admin管理员组

文章数量:1326012

I am new to angular js. I have search page with input text box to search for customerId but I want to add a functionality where I can search based on url string as well.

For example, My url is :

http://localhost:8080/#/search

But I need something like

http://localhost:8080/#/search?ACC34ff 

http://localhost:8080/#/search?CustomerId so that I can search based on customerId in url also

Can some one tell how can I add query string ?

app.config(['$routeProvider',
function($routeProvider) {
    $routeProvider
    .when('/home', {
        templateUrl: 'partials/home.html',
        controller: 'homePageCtrl',
        reloadOnSearch: true
    }).when('/features', {
        templateUrl: 'partials/features.html',
        controller: 'featuresCtrl',
        reloadOnSearch: false
    }).when('/search', {
        templateUrl: 'partials/search.html',
        controller: 'searchCtrl',
        reloadOnSearch: false
    }).otherwise({
        redirectTo: '/home'
    });
}]);

Controller :

appControllers.controller('searchCtrl', ['$scope','$route','$filter', '$http', '$location','$window','$timeout',
    function($scope, $route, $filter, $http, $location, $window, $timeout) {

        $scope.searchCustomerFeatures = function () {

            if($scope.customerId != null) {

            $http.get('/getCustomerFeatures.do', {params: {'customerId': $scope.customerId}}).success(function (data) {

                $scope.featuresJson = angular.toJson(data, true);
                });
            }
        }
    }]);

Html :

  <li ng-class="{active: isActive('/search')}" style="margin-left: 100px; text-decoration-color: black; font-size: 20px">
            <a href="#search" role="tab" data-toggle="tab">Search</a>
        </li >

Search page :

Thanks

I am new to angular js. I have search page with input text box to search for customerId but I want to add a functionality where I can search based on url string as well.

For example, My url is :

http://localhost:8080/#/search

But I need something like

http://localhost:8080/#/search?ACC34ff 

http://localhost:8080/#/search?CustomerId so that I can search based on customerId in url also

Can some one tell how can I add query string ?

app.config(['$routeProvider',
function($routeProvider) {
    $routeProvider
    .when('/home', {
        templateUrl: 'partials/home.html',
        controller: 'homePageCtrl',
        reloadOnSearch: true
    }).when('/features', {
        templateUrl: 'partials/features.html',
        controller: 'featuresCtrl',
        reloadOnSearch: false
    }).when('/search', {
        templateUrl: 'partials/search.html',
        controller: 'searchCtrl',
        reloadOnSearch: false
    }).otherwise({
        redirectTo: '/home'
    });
}]);

Controller :

appControllers.controller('searchCtrl', ['$scope','$route','$filter', '$http', '$location','$window','$timeout',
    function($scope, $route, $filter, $http, $location, $window, $timeout) {

        $scope.searchCustomerFeatures = function () {

            if($scope.customerId != null) {

            $http.get('/getCustomerFeatures.do', {params: {'customerId': $scope.customerId}}).success(function (data) {

                $scope.featuresJson = angular.toJson(data, true);
                });
            }
        }
    }]);

Html :

  <li ng-class="{active: isActive('/search')}" style="margin-left: 100px; text-decoration-color: black; font-size: 20px">
            <a href="#search" role="tab" data-toggle="tab">Search</a>
        </li >

Search page :

Thanks

• javascript
• angularjs
• url
• location
• query-string

Share Follow edited Feb 10, 2017 at 20:11 user3407267 asked Feb 10, 2017 at 20:05 user3407267user3407267 1,6341111 gold badges3636 silver badges6363 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Firstly, I can't believe you haven't got more answers because there are many ways to pass and retrieve a variable over the url, each being slight variations of 2 main ways.

1. As part of a Query String (as per your request)
2. As a Route Parameter (also worth mentioning)

The subsequent examples assume that you have a text input for customer id as follows:

<input type="text" ng-model="customerId" />

1) How to pass customerId as part of a Query String

Append ?cId={{ customerId }} to your link as follows:

<a href="#search?cId={{ customerId }}" role="tab" data-toggle="tab">Search</a>

Now when you click on the link you will be taken to a url such as:

http://localhost:8080/#/search?cId=ACC34ff 

You can then pick the cId parameter up in the controller by using the $location service.

app.controller('searchCtrl', function($scope, $location){
    var qsCustomerId = $location.search().cId;
    // Do what you want with qsCustomerId here... 
});

2) How to pass customerId as a Route Parameter

Create a new route that specifies a new cId route parameter:

app.config(['$routeProvider',
function($routeProvider) {
    $routeProvider
    .when('/search/:cId', {
        templateUrl: 'partials/search.html',
        controller: 'searchCtrl',
        reloadOnSearch: false
    })
}]);

Append /{{ customerId }} to your link as follows:

<a href="#search/{{ customerId }}" role="tab" data-toggle="tab">Search</a>

Now when you click on the link you will be taken to a url such as:

http://localhost:8080/#/search/ACC34ff

You can pick the cId parameter up in the controller using the $routeParams service.

app.controller('searchCtrl', function($scope, $routeParmas){
    var rpCustomerId = $routeParmas.cId;
    // Do what you want with rpCustomerId here... 
});

All you need is to pass the customerId as a parameter.

.when('/Search', {
        templateUrl: function (params) { return 'partials/search?customer=' + params.CustomerId; }
    })

In the follow link there is also an explanation on how to pass multiple parameters, in case you need: https://stackoverflow./a/35967896/5988277

本文标签： javascriptHow to append query string to url in AngularJSStack Overflow