Julius Knafl Julius Knafl - 12 days ago 3
AngularJS Question

Get autocompleted value from input in controller

I have the following in my view:

<label for="txtFrom">Pickup Location</label>
<input type="text" id="pickup" placeholder="Address, aiport, train station, hotel..." ng-model="pickup">
<label for="txtDestination">Destination</label>
<input type="text" id="destination" placeholder="Address, aiport, train station, hotel..." ng-model="destination">
<input class="btn btn-success" name="calcPrice" id="calcPrice" type="submit" value="Calculate Price" ng-click="calcPrice()">




I am using google maps api for places to autocomplete the input boxes, so if a user starts typing "Lo", he will get a list of places that starts with "Lo" and for example he chooses London.

The problem is in my controller I am not getting the whole autocompleted value. I am only getting what the user initially entered, in this case "Lo".

Here is my controller:

app.controller('BookingsCtrl', function($scope, BookingsService) {
$scope.pickup = "";
$scope.destination = "";
$scope.syncNotification = "";

$scope.calcPrice = function() {
console.log($scope.pickup);

BookingsService.save({
pickup: $scope.pickup,
destination: $scope.destination
}, function(response) {
console.log(response.message);
});
};
});




EDIT:
Here is also a snippet of the JS:

var pickup = document.getElementById('pickup');

var options = {
componentRestrictions: {
country: 'ee'
}
};

var autocompletePickup = new google.maps.places.Autocomplete(pickup, options);

google.maps.event.addListener(autocompletePickup, 'place_changed', function () {

var place = autocompletePickup.getPlace();
pickup.innerHtml = place.formatted_address;
var lat = place.geometry.location.lat();
var long = place.geometry.location.lng();

});


EDIT 2 : Added service

app.service('BookingsService', function ($resource) {
return $resource('http://localhost:3000/', {});
});


EDIT 3 : Template

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="components/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="assets/css/style.css" type="text/css" />
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDt1Y30OssBToIzSCOr3g5IkN3c0D75XVE&libraries=places"
></script>
</head>
<body ng-app='strelsau_client'>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<img class="masthead-brand" src="../assets/img/logo.png">
<nav>
<ul class="nav masthead-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</div>
<div ng-view>
</div>
</div>
</div>
</div>
<script src="components/jquery/dist/jquery.min.js"></script>
<script src="components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="components/angular/angular.min.js"></script>
<script src="components/angular-route/angular-route.min.js"></script>
<script src="components/angular-resource/angular-resource.min.js"></script>
<script src="js/main.js"></script>
<script src="js/controllers/bookings_controllers.js"></script>
<script src="js/services/bookings_service.js"></script>
</body>
</html>

Answer

In fact pickup input element is not getting updated once the place is resolved.

The problem with this function:

google.maps.event.addListener(autocompletePickup, 'place_changed', function () {

    var place = autocompletePickup.getPlace();
    pickup.innerHtml =  place.formatted_address; //invalid
    //...
});

For setting input field value should be used value property.

Anyway, given the example, try to replace it with:

(function (scope) {
            google.maps.event.addListener(autocompletePickup, 'place_changed', function () {
                var place = autocompletePickup.getPlace();
                scope.pickup = place.formatted_address;
            });
        })($scope);

Example

angular.module('myApp', [])

    .controller('BookingsCtrl', function ($scope) {

        $scope.pickup = "";
        $scope.destination = "";
        $scope.syncNotification = "";

        var pickup = document.getElementById('pickup');

        var options = {
            componentRestrictions: {
                country: 'ee'
            }
        };
        var autocompletePickup = new google.maps.places.Autocomplete(pickup, options);

        (function (scope) {
            google.maps.event.addListener(autocompletePickup, 'place_changed', function () {
                var place = autocompletePickup.getPlace();
                scope.pickup = place.formatted_address;
            });
        })($scope);

        $scope.calcPrice = function () {
            console.log($scope.pickup);
            alert($scope.pickup);

            /*BookingsService.save({
                pickup: $scope.pickup,
                destination: $scope.destination
            }, function (response) {
                console.log(response.message);
            });*/
        };
    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div ng-app="myApp" ng-controller="BookingsCtrl" ng-cloak>
        <label for="txtFrom">Pickup Location</label>
        <input type="text" id="pickup" placeholder="Address, aiport, train station, hotel..." ng-model="pickup">
        <label for="txtDestination">Destination</label>
        <input type="text" id="destination" placeholder="Address, aiport, train station, hotel..." ng-model="destination">
        <input class="btn btn-success" name="calcPrice" id="calcPrice" type="submit" value="Calculate Price" ng-click="calcPrice()">
    </div>

Comments