用spring映射url填充下拉框

populate dropdown with spring mapping url

本文关键字:填充 url spring 映射      更新时间:2023-09-26

我正在用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'

希望能有所帮助