这里我有国家/地区列表下拉列表,我想将选定的国家/地区名称和国家/地区代码(来自JSON格式的URL)发送到带有帖子URL的spring控制器。但在我的情况下,只有countrycode通过URL传递给spring控制器。任何人都可以帮忙..
<form data-ng-submit="submit()" data-ng-controller="MyController">
<h3>{{headerText}}</h3>
{{formData}}<br> <br>
<div data-ng-init="getCountry()">
<select id="countrylist"
style="border-radius: 10px; width: 210px; height: 40px"
data-ng-model="Countryselected"
data-ng-options="country .cntryName for country in getCountries"
data-ng-click="getCity()">
<option value="">Select Country</option>
</select>
</div>
<br>
<div>
<select style="border-radius: 10px; width: 210px; height: 40px"
data-ng-model="cityselect" data-ng-disabled="!Countryselected"
data-ng-options=" c.cityName for c in availableCities "
data-ng-click="getPlace()">
<option value="">Select City</option>
</select>
</div>
<div>
<p>{{Countryselected}}</p>
</div>
<div>
<p>{{cityselect}}</p>
</div>
<div>
<pre>Form data ={{list}}</pre>
<input type="text" id="tags" data-ng-model="placeselected"
data-ng-keydown="complete()" placeholder="Type place name"> <br>
<!-- <select style="border-radius: 10px; width: 210px; height: 40px" data-ng-model="placeselected" data-ng-options=" x.answer for x in availablePlaces "> -->
<!-- <option value="">place</option> -->
<!-- </select> -->
<input type="submit" value="Submit" id="submit">
这是我的javascript代码:
var app = angular.module('myApp', []);
app
.controller(
'MyController',
function($scope, $http) {
$scope.getCountry = function() {
$http(
{
method : 'GET',
url : 'http://localhost:8080/SpringRestCrud/newclue/country/list'
}).success(
function(data, status, headers,
config) {
$scope.getCountries = data;
}).error(
function(data, status, headers,
config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
};
$scope.getCity = function() {
$scope.availableCities = [];
$http(
{
method : 'GET',
url : 'http://localhost:8080/SpringRestCrud/newclue/city/list'
}).success(
function(data, status, headers,
config) {
$scope.getCities = data;
}).error(
function(data, status, headers,
config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
angular
.forEach(
$scope.getCities,
function(value) {
if (value.countrycode.cntryCode == $scope.Countryselected.cntryCode) {
$scope.availableCities
.push(value);
}
});
};
// $scope.contry = angular.copy.Countryselected;
// $scope.city = angular.copy.cityselect;
// --------------------------------------------------------------------------------------------
$scope.getPlace = function() {
$scope.complete = function()
{
$scope.availablePlaces = [];
$http(
{
method : 'GET',
url : 'http://localhost:8080/SpringRestCrud/newclue/clue_answer/list'
}).success(
function(data, status, headers,
config) {
$scope.getPlaces = data;
}).error(
function(data, status, headers,
config) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
angular
.forEach(
$scope.getPlaces,
function(value) {
if (value.citycode.cityCode == $scope.cityselect.cityCode) {
$scope.availablePlaces
.push(value.answer);
}
});
$("#tags").autocomplete(
{
source : $scope.availablePlaces
});
}
};
$scope.list = [];
$scope.headerText = 'AngularJS Post Form Spring MVC example: Submit below form';
$scope.submit = function() {
var formData = {
cntryName: $scope.Countryselected.cntryName,
cntryCode: $scope.Countryselected.cntryCode
};
alert("Hello2--->"+formData.cntryName);
var response = $http
.post(
'http://localhost:8080/SpringRestCrud/newclue/PostFormData',
formData);
response.success(function(data, status,
headers, config) {
alert("hello3--"+data.cntryCode);
$scope.list.push(data);
});
response.error(function(data, status,
headers, config) {
alert("Exception details: "
+ JSON.stringify({
data : data
}));
});
//Empty list data after process
$scope.list = [];
};
});
答案 0 :(得分:0)
更改这样的ng-options:
data-ng-options="country as country.cntryName for country in getCountries"