Initiate a model refresh via the view using AngularJS

When the view, such as the value in a text input, is modified by an external JavaScript, it does not update the model.

Is there a way to initiate a model update to retrieve all binding values from the view?

P.S: I am unable to manually set the model value for certain reasons; I simply need to invoke the same function triggered when the user types in the text box.

Answer №1

When updating the value of an element, such as an input that utilizes ng-model, simply triggering the element's 'change' event should be sufficient.

Using jQuery:

$('#input').val('new value').trigger('change');

Without jQuery:

var input = document.querySelector('#input');
input.value = 'new value';

var event = document.createEvent('HTMLEvents');
event.initEvent('change', true, false);
input.dispatchEvent(event);

See Demo: http://plnkr.co/edit/IFb8OmegaGAAniy9ttn5?p=preview

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Randomly generated numerical value in input field

How can I generate a 15-digit number using JS code and then reduce it to just 5 or 6 digits in a text box? <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript ...

What could be causing res.redirect to fail?

I am currently facing an issue with making an http.post request from Angular to an API on the backend. After the post request, I am trying to redirect to another page but for some reason, the redirect is not working properly. I am looking for an alternat ...

Deselect a checkbox by selecting a radio button with just Javascript code

Hey there! I'm currently delving into the world of pure JavaScript and could really use some guidance on a particular issue. Here's what I'm aiming to accomplish: I'd like to design a checkbox that triggers the opening of a window whe ...

Having an issue with displaying the country name and country code in a table using the Angular7 custom pipe

country code: "ab", "aa", "fr", ... I need to create a custom pipe that will convert a countryCode into a countryName, such as: "ab" → "Abkhazian", "ch" → "Chinese", "fr" ...

Only IE has a different margin-top effect on hover in the slideshow - Check out the CSS & project link for more details

When hovering over the IE slideshow, it moves downward. Any suggestions on why this happens? Visit development.legendarylion.com for more information. Could someone provide insight on why the slideshow increases top margin when hovered over? Explore the ...

Displaying and Concealing Divisions

My journey to showing/hiding divs began with piecing together a series of questions: $(document).ready(function(){ $('.box').hide(); $('#categories').onMouseOver(function() { $('.box').hide(); $('#div' + ...

Embed schema information into HTML tags using JavaScript

Is there a way to insert text, specifically schema data, into an HTML div tag using JavaScript? While I know how to modify existing values within a tag like class, href, and title, I am struggling to find a method to add something entirely new. Essentiall ...

JavaScript JSON Loop only counting a single entry

After reviewing some JSON code, I noticed that when logging the IDs from the entries, it only counts 1 and then stops. Even though there are 2 entries in total, the log does not proceed to count the second one. var json = [{"main":[{ "id" : "1", ...

Warning: Angular.js encountered a max of 10 $digest() iterations while iterating through array slices. Operation aborted

JSbin: http://jsbin.com/oxugef/1/edit I am attempting to slice an array into smaller subarrays and iterate through them in order to create a table of divs that are evenly divided. Unfortunately, there seems to be an issue where I am unknowingly overwritin ...

Understanding the fundamental concepts of callbacks with Backbone.js

Currently, I am working with Backbone to send a login form to my server. Once the form is submitted and the database query is successful, a boolean value is flipped to enable GET responses from the server. However, the issue arises when it attempts to fetc ...

Tips for deleting content from a div that contains numerous siblings

<div class="latest_posts style3 latest_posts--style2 latest_posts2 clearfix eluidf4c60403 latestposts2--dark element-scheme--dark"> <h3 class="m_title m_title_ext text-custom latest_posts2-elm-title" itemprop="headline"></h3> &l ...

Extract the content of an element and incorporate it into a script (AddThis)

HTML: <div id="file-section"> <div class="middle"> <p class="description"> Lorem ipsum... </p> </div> </div> jQuery: var share_on_addthis = { description: $('#file-section ...

Navigating through Angular2 Tutorial (Tour of Heroes): Could not locate module with the name './app-routing.module'

Currently, I am working my way through the NG2 tutorial located here, however, I have come across a stumbling block. Upon attempting to import my AppRoutingModule in my app.module.ts file, I encounter a 'Cannot find module './app-routing.module& ...

The DateFormat.js script encountered an error: Unexpected token export

While working with some Kubernetes PODS, I suddenly encountered an error in one of the pods. The issue seems to be originating from line 6 of my code. I haven't made any changes recently; I was just deploying on GitLab when I noticed that this particu ...

Converting a JavaScript array into JSON using PHP

After analyzing the text, I was trying to figure out how to convert it into json format using php's json_decode function. Unfortunately, when I used json_decode on this text, it returned a syntax error. $arr = json_decode($str, true); {1: {name: &ap ...

What is the best way to retrieve nested reference data all at once from a Firestore document?

I have two distinct collections stored within my Firestore database. The first collection is users, and it can be visualized as shown here: https://i.stack.imgur.com/AKlyM.png The second collection is posts, represented by the following structure: http ...

Issues encountered in loading JavaScript with jQuery script

I am facing an issue with my jQuery script not loading correctly. When I click on the calculate button, nothing happens as expected. I made sure to copy and paste jQuery directly into the file for offline use, and also created a personal console due to res ...

Building a basic music player with the <audio> element and JavaScript / jQuery

I am new to Javascript and jQuery, and this is my first time posting a question here. I have been trying to create custom functions for the HTML5 audio tag by following tutorials online. Despite my efforts, I cannot seem to get it working. Although I can m ...

Finding the IP address from a hostname in Node.js: A step-by-step guide

I am looking for a solution to resolve a hostname defined in the hosts file to its corresponding IP address. Take, for instance, my hosts file located at "/etc/hosts": 127.0.0.1 ggns2dss81 localhost.localdomain localhost ::1 localhost6.localdomain ...

What is the optimal approach for creating new objects using a mandatory module?

After dividing my code into several Typescript classes and interfaces, I realized that although this method is effective for testing and maintenance purposes, I am curious if there might be a better approach to constructing required objects. Currently, I h ...