populate dropdown with spring mapping url

My Name is Ashish kumar .I am working on spring project with angular js .I have two dropdowns ,one for country list and second for citylist.
I am getting my json from spring controller for both country and city .i am able to get country list in my country dropdown .but i want to pass countrycode of selected country with city list url because my spring controller mapping is like:-country/{id}/city for getting city list according to city id.i want that if i send country code as query string instead of {id} in city url ,so that i can get city list with based on country id everyttime based on selected country.

Here is my html code:

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

Here is my 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.
                                            });

Here is my country list json:-

 [{"cntryCode":1,"cntryName":"India"},{"cntryCode":2,"cntryName":"Australia"},{"cntryCode":3,"cntryName":"Pakistan"},{"cntryCode":4,"cntryName":"America"}]

Here is my city list 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"}]


Source: json

Leave a Reply