谷歌使用角度js放置自动完成功能

Question

谷歌使用角度js放置自动完成功能

Puj*_*uja 5 google-maps autocomplete angularjs

我试图让谷歌的地方自动完成工作与角js.这里是jsfiddle - 模型在'place_change'事件后没有得到更新.它正在更新输入的更新.

下面是HTML代码 - HTML

<body ng-app="mapApp">
    <div ng-controller="MapController">
        <input id="from" type="text" ng-model="user.from" placeholder="Type Address" class="ng-pristine ng-valid" autocomplete="off">
        <input type="hidden" ng-model="user.fromLat">
        <input type="hidden" ng-model="user.fromLng">
            <p>{{user.from}} <br> {{'Latitude : ' + user.fromLat + ', Longitutde : ' + user.fromLng}}</p>
    </div>
</body>

Run Code Online (Sandbox Code Playgroud)

Java脚本

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

mapApp.controller('MapController', function ($scope) {
    $scope.user = {'from': '', 'fromLat': '', 'fromLng' : ''};
    var options = {
        componentRestrictions: {country: "in"}
    };
    var inputFrom = document.getElementById('from');
    var autocompleteFrom = new google.maps.places.Autocomplete(inputFrom, options);
    google.maps.event.addListener(autocompleteFrom, 'place_changed', function() {
        var place = autocompleteFrom.getPlace();
        $scope.user.fromLat = place.geometry.location.lat();
        $scope.user.fromLng = place.geometry.location.lng();
        $scope.user.from = place.formatted_address;
    });
});

Run Code Online (Sandbox Code Playgroud)

Answer 1

rob*_*rob 5

您需要在place_change事件被触发时告诉angular,因此它知道何时更新DOM.你可以通过电话来做到这一点$scope.$apply().例如:

google.maps.event.addListener(autocompleteFrom, 'place_changed', function() {
        var place = autocompleteFrom.getPlace();
        $scope.user.fromLat = place.geometry.location.lat();
        $scope.user.fromLng = place.geometry.location.lng();
        $scope.user.from = place.formatted_address;
        $scope.$apply();
    });

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，4 月前
查看次数：	17775 次
最近记录：	11 年，4 月前