Assign a value to ng-model using JavaScript

Question

Assign a value to ng-model using JavaScript

Encountering an issue while working with JavaScript in AngularJS. There is a text field identified by id="longitude".

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

The value of this field is being set using JavaScript.

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

However, the Angular JS controller is unable to retrieve the value of this field unless it is manually typed in. How can I adjust my JavaScript to properly set the model value for this field? Thank you for any insight provided.

javascript angularjs

Answer 1

Answer №1

When using angular, it's best to follow the angular way of setting or updating values.

If you need to update an input field based on a specific event, such as a button click, here's how you can do it:

Let's say you have the following HTML code:

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

Make sure to update your controller with the necessary click event binding:

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

For further reference, I've created a plunker for you: http://plnkr.co/edit/F1eXNVKsmYsn5TMQxxH6?p=preview

Answer 2

When using angular, it's best to follow the angular way of setting or updating values.

If you need to update an input field based on a specific event, such as a button click, here's how you can do it:

Let's say you have the following HTML code:

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

Make sure to update your controller with the necessary click event binding:

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

For further reference, I've created a plunker for you: http://plnkr.co/edit/F1eXNVKsmYsn5TMQxxH6?p=preview

Answer 3

Answer №2

To update the input text with a value, simply define your model in the controller

$scope.newWarehouse = {
    longitude: 456
}

Answer 4

To update the input text with a value, simply define your model in the controller

$scope.newWarehouse = {
    longitude: 456
}

Answer 5

Answer №3

In order for Angular to register the changed value, it is important to invoke the input event.

For more detailed information on how to trigger an "input" event programmatically without using jQuery, please refer to this answer: How do I programmatically trigger an “input” event without jQuery?

I encountered a similar scenario due to my use of a pure JS library, which necessitated this approach.

Answer 6

In order for Angular to register the changed value, it is important to invoke the input event.

For more detailed information on how to trigger an "input" event programmatically without using jQuery, please refer to this answer: How do I programmatically trigger an “input” event without jQuery?

I encountered a similar scenario due to my use of a pure JS library, which necessitated this approach.

Assign a value to ng-model using JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Is the RouterModule exclusively necessary for route declarations?

Tips for limiting a website to load exclusively within an iframe

Is it possible for two-way binding to function in index.html within Angular 4?

The radio button element could not be located using the attribute "checked="Checked""

How can we update the form builder or form group in Angular 2 when making changes to the existing data in a table? I'm a bit confused on how to implement router

The HTML elements in my JSX code seem to constantly shift around whenever I resize my webpage

While running tests on a React project, the `npm test` command is successful, but unfortunately,

Combining multer, CSRF protection, and express-validator in a Node.js environment

What is the reasoning behind placing CDN links at the bottom of the index file?

Ways to effectively apply multiple filters in an ng-repeat directive

Is there a way to align these side by side?

adjusting three sections within a flexible navigation bar

Having trouble getting Emberjs to properly handle an Ajax POST request

Tips for applying ng-class to elements in AngularJS that need to be styled both conditionally

Utilizing the variables defined in the create function within the update function of Phaser 3

Is it beneficial to display three.js on a <canvas> rather than a <div>?

Is there a way to retrieve a raw value from the API response that matches the one shown in POSTMAN, but my attempts have been unsuccessful?

"JQuery's selector is failing to locate elements once they have been loaded through an

Disable the ng-click event when swiping left with ng-swipe-left

"Troubleshooting Problem with JSON Encoding in PHP and Parsing with getJSON in