用spring映射url填充下拉框
populate dropdown with spring mapping url
我正在用angular js做春季项目。我有两个下拉菜单,一个是国家列表,第二个是城市列表。
我正在从国家和城市的spring控制器获取json。
我能够在我的国家下拉列表中获得国家列表,但我想通过所选国家的国家代码与城市列表URL,因为我的spring控制器映射就像:-country/{id}/city用于根据城市id获取城市列表。
我想,如果我发送国家代码作为查询字符串,而不是{id}在城市URL,这样我就可以得到城市列表与基于国家id每次基于所选的国家。
下面是我的html代码:
<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>
这是我的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/country/{id}/cities'
}).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.
});
这是我的国家列表json:-
[{"cntryCode":1,"cntryName":"India"},{"cntryCode":2,"cntryName":"Australia"},{"cntryCode":3,"cntryName":"Pakistan"},{"cntryCode":4,"cntryName":"America"}]
这是我的城市列表json:-
[{"cityCode":1,"cityName":"banglore"},{"cityCode":2,"cityName":"manglore"},{"cityCode":3,"cityName":"aus1"},{"cityCode":4,"cityName":"sydney"},{"cityCode":5,"cityName":"lahore"},{"cityCode":6,"cityName":"Islamabad"},{"cityCode":7,"cityName":"Newyork"},{"cityCode":8,"cityName":"Newyork2"}]
首先要做的是将HTML中的data-ng-click="getCity()"
更改为data-ng-change="getCity()"
,您希望在用户选择国家后触发事件。你需要做的最后一件事是改变你在getCity()
函数中调用的URL,将其更改为:
url : 'http://localhost:8080/SpringRestCrud/newclue/country/' + $scope.Countryselected.cntryCode + '/cities'
希望能有所帮助
相关文章:
- 类型错误:url未定义extjs 4正在填充组合框
- 如何使用Javascript从URL参数中自动填充文本字段
- 如何用URL预填充wufoo字段
- 根据url填充表单选择下拉列表
- 使用 Javascript/Jquery 预填充表单字段和来自 URL 的标签
- 使用 URL 填充下拉菜单
- 使用javascript从url参数填充texbox值
- 如何用php url返回的JSON对象填充表
- PHP通过URL自动填充选择框
- 加载内联 SVG 时填充(url#)出现问题
- 通过书签使用来自另一个网站的 url 自动填充文本字段
- 从 URL 变量填充电子邮件字段
- 如何使用 Javascript 或 jQuery 从 URL 获取查询字符串以填充选择值
- 使用来自 URL 的数据填充文件输入
- 填充标题中的URL参数
- 填充jqGrid取决于url参数
- 用模型信息填充JSTree中的AJAX url
- 使用JSON URL数据动态填充HTML表
- 定位用于在HTML中动态填充内容的URL
- 画布转换-使用填充url时的奇怪行为