angularjs – Google使用角度js放置自动完成功能

发布时间：2020-12-17 17:38:09 所属栏目：安全来源：网络整理

导读：我试图让谷歌的地方自动完成工作与角js.这是 jsfiddle – 在’place_change’事件之后,模型没有得到更新.它正在更新输入的更新. 下面是html代码 – HTML body ng-app="mapApp" div ng-controller="MapController" input id="from" type="text" ng-model="use

我试图让谷歌的地方自动完成工作与角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>

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;
    });
});

解决方法

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

google.maps.event.addListener(autocompleteFrom,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();
    });

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!