On values from script function to input field ng-model gives undefined Angular

Question

I am using google maps in my application in which i use maps related code in script tag and on after the search result it gives longitude, latitude and i am getting these values and showing these values in input

here is my part of script code which passes lon and lat to input

 document.getElementById('lat').value = place.geometry.location.lat();

    document.getElementById('lng').value = place.geometry.location.lng();

here is my HTML code

<div class="from-group">
<li>Latitude: <input class="from-control" ng-model="formData.lat" id="lat"></li>
<li>Longitude: <input class="from-control" ng-model="formData.lng" id="lng" ></li>
<button class="btn btn-primary" ng-click="values()" id="idbtn" >Results</button>
</div>

but it gives undefined for ng-model="formData.lng" and when i enter some thing manually it works fine but when values comes from script it gives undefined

here is my controller code

Sscope.formData={}; 
    $scope.values = function () {

    console.log($scope.formData.lat);
    console.log($scope.formData.lng);
};

Community · Accepted Answer · 2017-05-23 11:51:35Z

1

When you pass the lat and long from your javascript file with

document.getElementById('lat').value = place.geometry.location.lat();
document.getElementById('lng').value = place.geometry.location.lng();

The ng-model is not getting updated or 'triggered'

try

angular.element($('#myInputElement')).triggerHandler('input')

there is a good post here that may help.

You may consider using a google maps directive such as ng-map

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Aug 12, 2016 at 0:48

Douglas

17711 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MudassirAfzal Over a year ago

no idea how to use this approach but i use other way $scope.$watch but its not working need bit more explaination thanx

georgeawg · Accepted Answer · 2016-08-19 23:25:16Z

0

You need to set the $scope variable with $apply.

var latElem = angular.element(document.getElementById('lat'))
var latScope = latElem.scope();
latScope.$apply("formData.lat=" + place.geometry.location.lat());

$apply evaluates an Angular Expression and initiates an AngularJS digest cycle to update the framework.

answered Aug 19, 2016 at 23:25

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Collectives™ on Stack Overflow

On values from script function to input field ng-model gives undefined Angular

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related