如何在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 >

搜索页面：

感谢

答

您所需要的只是传递customerId作为参数。

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

在以下网站上也有如何传递多个参数的说明，如果你需要： https://stackoverflow.com/a/35967896/5988277

我在控制器端不需要任何东西？我不清楚它将如何使用客户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... 
});

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

相关推荐