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

Question

我是棱角分明的新手.我有带输入文本框的搜索页面来搜索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传递和检索变量,每种方法都有两种主要方式的轻微变化.

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>

现在当您点击链接时,您将被带到一个网址,例如:

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

然后,您可以cId使用该$location服务在控制器中选择参数.

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

您可以cId使用该$routeParams服务在控制器中选择参数.

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