如何在AngularJS中將查詢字符串附加到url？

Question

我是angular js的新手。 我有帶有輸入文本框的搜索頁面，用於搜索customerId，但是我想添加一個功能，使我也可以基於url字符串進行搜索。

例如，我的網址是：

http://localhost:8080/#/search

但是我需要這樣的東西

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

http：// localhost：8080 /＃/ search？CustomerId，以便我也可以基於url中的customerId搜索

有人可以告訴我如何添加查詢字符串嗎？

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'
    });
}]);

控制器：

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 >

搜索頁面：

謝謝

Answer 1

首先，我無法相信您沒有更多的答案，因為有很多方法可以通過URL傳遞和檢索變量，每種方法都是2種主要方法的細微變化。

1. 作為查詢字符串的一部分（根據您的請求）
2. 作為路由參數 （也值得一提）

后續示例假定您具有客戶id的文本輸入，如下所示：

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

1）如何將customerId作為查詢字符串的一部分傳遞

將?cId={{ customerId }}附加到您的鏈接，如下所示：

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

現在，當您單擊鏈接時，您將被帶到一個URL，例如：

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

然后，您可以使用$location服務在控制器中選擇cId參數。

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

2）如何將customerId傳遞為路由參數

創建一個指定新的cId路由參數的新路由：

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

將/{{ customerId }}附加到您的鏈接，如下所示：

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

現在，當您單擊鏈接時，您將被帶到一個URL，例如：

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

您可以使用$routeParams服務在控制器中選擇cId參數。

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

Answer 2

您需要做的就是傳遞customerId作為參數。

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

在以下鏈接中，還提供了有關如何傳遞多個參數的說明（如果需要）： https : //stackoverflow.com/a/35967896/5988277