我是棱角分明的新手。我有带输入文本框的搜索页面来搜索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 >
搜索页面:
由于
答案 0 :(得分:5)
首先,我无法相信你没有得到更多的答案,因为有很多方法可以通过网址传递和检索变量,每种方法都有两种主要方式的轻微变化。
后续示例假设您有一个客户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...
});
答案 1 :(得分:0)
您只需将customerId作为参数传递即可。
.when('/Search', {
templateUrl: function (params) { return 'partials/search?customer=' + params.CustomerId; }
})
在以下链接中,还有一个关于如何传递多个参数的说明,以备您需要: https://stackoverflow.com/a/35967896/5988277