javascript - 如何从自动完成位置文本字段捕获 angularjs 范围内的数据

Question

我正在开发一种 angularjs 表单，其中包含位置文本字段。对于位置文本字段，我使用谷歌地图来自动完成。问题是，我无法使用 data-ng-model 存储完整的数据数据库。因为，只有输入的文本被绑定(bind)并存储在数据库中，而不是完整的数据。例如，如果我输入“Pun”，自动完成填充“Pune，马哈拉施特拉邦，印度”，但只有“Pun”存储在数据库中(因为我只在文本字段中输入“Pun”。如何捕获完整数据并将其转换为 json并将其存储在数据库中？请帮我解决这个问题。提前致谢。

这是我的代码:

JavaScript

<script type="text/javascript">


    var app = angular.module('formSubmit', []);




    app.controller('FormSubmitController',[ '$scope', '$http', function($scope, $http) {

    /*    $scope.myDataBlurred = $scope.area; */
        $scope.list = [];
            $scope.headerText = 'AngularJS Post Form Spring MVC example: Submit below form';

             $scope.blurred = function() {
                 $scope.myDataBlurred = $scope.area;
              }
            $scope.submit = function() {




                var formData = {

                        "agreement_exp_date" : $scope.agreement_exp_date,
                        "amenities" : $scope.amenities,
                        "area": $scope.myDataBlurred,
                        "bathrooms" : $scope.bathrooms,
                        "bedrooms" : $scope.bedrooms,
                        "State": $scope.State,
                        "city": $scope.city,
                        "country" : $scope.country,
                        "current_property_status" :$scope.current_property_status,
                        "car_spaces" : $scope.car_spaces,
                        "expired" : $scope.expired,
                        "furnished" : $scope.furnished,
                        "floor_or_level" : $scope.floor_or_level,
                        "house_number" : $scope.house_number,
                        "notes" : $scope.notes,
                        "ofname" : $scope.ofname,
                        "pfname" : $scope.pfname,
                        "parking_type" : $scope.parking_type,
                        "pincode" : $scope.pincode,
                        "prop_avail_date" : $scope.prop_avail_date,
                        "prpty_owner_email_id" : $scope.prpty_owner_email_id,
                        "prpty_pm_email_id" : $scope.prpty_pm_email_id,
                        "prpty_registration_no" : $scope.prpty_registration_no,
                        "prpty_type" : $scope.prpty_type,
                        "sqft" : $scope.sqft,
                        "street_name" : $scope.sqft,
                        "verified" : $scope.verified,
                        "prpty_type_sub" : $scope.prpty_type_sub,
                        "published_on": $scope.published_on,
                        "profile": $scope.profile

                    /*  "location" : $scope.location,
                        "phone" : $scope.phone   */
                };

                var response = $http.post('/Owner/addprop', formData);
                response.success(function(data, status, headers, config) {
                    $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 = [];
                 $scope.$setPristine();

            };
        }]);
</script>

HTML

<div class="col-md-6">
                            <span> Location<i style="color: red;">*</i> 
                                    <div id="locationField">
                                        <input id="autocomplete" name="property_loc"
                                            placeholder="Search for location" onFocus="geolocate()"
                                            type="text" class="form-control"  value="${locn}"  data-ng-model="area"  ng-blur="blurred()" required></input>
                                    </div>

                        </div>

Answer 1

获取此代码!

它与Google Maps API配合使用。首先在输入字段中输入城市名称!

不要看警告和错误。如果您添加 API key ，则无需添加即可使用!

var myApp = angular.module('myApp', []);
myApp.directive('googleplace', function() {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, model) {
            var options = {
                types: []
            };
            scope.gPlace = new google.maps.places.Autocomplete(element[0], options);

            google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
                scope.$apply(function() {
                    model.$setViewValue(element.val());                
                });
            });
        }
    };
});
function MyCtrl($scope) {
    $scope.gPlace;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
    <div>Your location is: {{chosenPlace}}</div>
    <div><input ng-model="chosenPlace" googleplace/></div>
</div>