Set value for ng-model by javascript

Question

I have a problem when using javascript with angularJS. I have a text field with id="longitude".

<input type="text" data-ng-model="newwarehouse.longtitude" id="longitude"/>

I set the value of this field by javascript.

var longitudeValue = document.getElementById('longitude');
longitudeValue.value = event.latLng.lng();

But when I process the controller of Angular JS can't get the value of this field except I type manual the value for this field. What should I write in javascript to set the model value of this field? Thanks everyone.

If you are using angular then set the value via controllers. Why are you playing it with javascript? — Nikhil Aggarwal, Jun 14 '15 at 16:36
seems like you're a beginner. It would be good if u learn the basics before diving into code. — Gopinath Shiva, Jun 14 '15 at 17:26
Sometimes you need to work with other libraries that don't work well with angular. If you set the value without triggering the input event, angular has no clue the value has changed. See my answer below. @GopinathShiva - Phat may not be a beginner after all. — DevEarley, Dec 28 '17 at 19:31

score 0 · Answer 1 · answered Jun 14 '15 at 16:44

When you are working with angular, then to set/update the value, use angular way of dealing things.

What you want is update the input field based on some event.

Let us say that it is a click event of a button.

So, in html lets say you have something like this

<a href="javascript:void(0);" ng-click="clickme()">Click me</a>

And update your controller, with click event binding

 $scope.clickme = function() {
     $scope.newwarehouse = {
         longtitude : 'longitute'
     };
  };

I have created a plunker for you for your reference - http://plnkr.co/edit/F1eXNVKsmYsn5TMQxxH6?p=preview

score 0 · Answer 2 · answered Jun 14 '15 at 17:24

0

Just assign value to input text by setting your model in controller

$scope.newwarehouse = {
    longtitude: 123
}

answered Jun 14 '15 at 17:24

simon

1,415
10
20

score 0 · Answer 3 · answered Dec 28 '17 at 19:29

You need to call the input event so angular knows the value has changed.

Please see the answer here for more information on how. How do I programmatically trigger an “input” event without jQuery?

I needed to do something like this because I was using a library that was pure JS.

Set value for ng-model by javascript

3 Answers3