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

我是新來的角js。我有搜索頁面輸入文本框來搜索customerId，但我想添加一個功能，我可以根據url字符串進行搜索。如何在AngularJS中追加查詢字符串到url？

例如，我的網址是：

http://localhost:8080/#/search

但我需要這樣的東西

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

http://localhost:8080/#/search?CustomerId，這樣我可以搜索基於客戶ID的URL也

有沒有人告訴我怎樣才能添加查詢字符串？

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 >

搜索頁面：

感謝

來源

2017-02-10 user3407267

您所需要的只是傳遞customerId作爲參數。

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

在以下網站上也有如何傳遞多個參數的說明，如果你需要： https://stackoverflow.com/a/35967896/5988277

來源

2017-02-10 20:39:02 wduqu001

我在控制器端不需要任何東西？我不清楚它將如何使用客戶ID – user3407267

當我使用http：// localhost：8080 /＃/ search？ACC34ff而不是http：// localhost：8080 /＃/搜索 – user3407267

我的不好。您需要設置控制器來讀取參數。 $ http.get（'/ Search /'+ $ routeParams.customerId） .success（function（response）{ .... }）; – wduqu001

首先，我不能相信你還沒有得到更多的答案，因爲有有很多方法可以通過url傳遞和檢索變量，每個變量都是2種主要方式的輕微變化。

作爲查詢字符串的一部分（根據您的要求）
作爲路由參數（也值得一提）

隨後的例子假設你有一個文本輸入對於客戶ID如下：

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

1）如何通過customerId作爲查詢字符串

追加?cId={{ customerId }}一部分，你的鏈接如下：

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

現在，當你點擊鏈接，你會被帶到一個網址，如：

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>

現在，當你點擊鏈接，你會被帶到一個網址，如：

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

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

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

來源

2017-02-10 22:24:07

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

回答

相關問題