繁体   English   中英

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

How to append query string to url in AngularJS?

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我是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 >

搜索页面:

谢谢

2 个回复

首先,我无法相信您没有更多的答案,因为有很多方法可以通过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... 
});

您需要做的就是传递customerId作为参数。

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

在以下链接中,还提供了有关如何传递多个参数的说明(如果需要): https : //stackoverflow.com/a/35967896/5988277

1 将查询字符串附加到url

我有一个回调URL字符串params[:callback] ,我需要附加一个查询字符串"&amp;result=true"并重定向用户。 我发现更好的方法是使用addressable但是我认为代码对于这样的任务来说太大了,尤其是当我们谈论红宝石时: 是否有一种更优雅的方式来获得与该片段 ...

2 如何在代码接收中向URL附加查询字符串

我正在尝试使用Codeception和BrowserStack在网站上进行验收测试。 我正在测试的网站需要在URL后面附加查询字符串才能登录。 例如: https : //examplesite.com/?realm=ab-cd 我试图在acceptance.suites.yml文 ...

5 使用 Jquery 将查询字符串附加到 URL

我究竟做错了什么? 仅在 URL 位置为“/MyWebsite/Example.aspx”的页面上附加“?template=PW” 但仅限于包含“/HelloWorld/default.aspx”的链接 没有与此链接关联的 ID 或类,因此我必须查找 URL。 这是我的代码,但链接没有 ...

2013-05-06 23:04:58 5 33272   jquery
6 PHP如何在页面加载之前将查询字符串附加到URL

我有一个页面(在Wordpress中),其中包含嵌入式数据库报表。 表单被配置为基于页面URL的查询字符串来过滤结果。 查询字符串是特定于用户的,因此每个用户都可以查看适用于他们的结果。 我在页面模板中编写了一个PHP脚本,该脚本可生成正确的URL,并添加了查询字符串。 我现在想做的 ...

8 如何从JSP向URL附加查询字符串?

我有一个评论页面。 我希望用户能够通过单击评论部分中显示的链接来按oldest或newest的顺序对这些评论进行排序。 我已经通过url预处理了视图。 因此,当用户浏览到book?id=20它将显示数据库中id为20的书。 直接转到book?id=20&amp;sort=olde ...

2012-05-03 00:06:09 1 3312   java/ jsp
9 Laravel:如何将其他项目追加到URL查询字符串

我的表格有两个字段 并将字段提交到网址,例如 在我的Laravel控制器中 我想允许我的用户添加其他的SUBURBS或STATES,以便他们可以获得更多结果,例如。 我不知道如何设置表单以将“ OR”附加到其他郊区,以及如何设置控制器以查找其他值? ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM