如何将选定的国家/地区名称从下拉列表发送到带有角度js的spring mvc

时间:2015-05-28 07:00:38

标签: angularjs

这里我有国家/地区列表下拉列表,我想将选定的国家/地区名称和国家/地区代码(来自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 = [];

                            };

                        });

1 个答案:

答案 0 :(得分:0)

更改这样的ng-options:

data-ng-options="country as country.cntryName for country in getCountries"