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

Error message: "AngularJS encountered a $injector:modulerr error in Internet Explorer 11."

Steps to extract a hash from a document's URL

Position the div in the center of a container that is 100% width and has floating elements with dynamic widths

Using PHP variables in JavaScript is not compatible

Tips for handling a JSON payload retrieved through a POST request

execute a function for every regex match found within a string

Utilizing ng-repeat to loop through a div element that consists of various nested tags

Having difficulty placing a marker using google-maps-react

Exclude the HTML attribute prior to displaying

Sending data between two elements when a jQuery event is triggered

Page Not Found: React and Express Route Not Found

Produce a vue attribute

Is there a way to verify the identity of two fields using an external script such as "signup.js"?

The content on Twitter Bootstrap remains consistent

Executing a function enclosed in parenthesis does not yield any output

"Obtain permission from Azure Graph to fetch details for a specific user using their principal

Cease the execution of a task in Express.js once the request timeout has been

Utilizing Vue.js to add functionality for navigation buttons allowing users to move between survey questions

Issue with injecting Angular service in unit test

Converting a string to JSON format with JavaScript