Detecting changes in AngularJS ng-model bindings for text input fields

I am new to Angular and facing a challenge. I have an input field set as read only using ng-readonly. There is also a button that, when clicked, triggers a javascript function called openPopup. This function opens a popup where a selection can be made, and upon clicking ok, the main page should display the selected value in the readOnly input text.

My issue lies in capturing the event when the text changes in the input field, reading that value, and then taking action within Angular.

Despite the text field value changing, the corresponding ng-model data.currentLot remains unchanged. I have tried using ng-change, $apply, $watch, onchange event, but none of these solutions seem to work. Is there a simple step that I am overlooking?

<div class="form-group">    
<input type="text"  ng-readonly="'true'"  ng-model="data.currentLot" class="form-control" id="chooseLotId" placeholder="">
<button type="submit" class="btn btn-default" onclick="openPopup('chooseLotId', false);">Search Lots</button>

Answer №1

Shout out to instantNoodles for the helpful tip that helped me conquer the issue at hand. Once I made a selection from the pop up, it would automatically close and shift the focus back to my input text. By capturing the onfocus event, I managed to resolve this dilemma.

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

Guide to automatically updating a chart after each for loop iteration in Chart.js

Currently, I am utilizing Chart.js for visualizing some data and I require the chart to be updated after each iteration of a for loop. Unfortunately, the chart only updates at the conclusion of the for loop. Despite my attempts with setInterval and setTim ...

Add a new div in Javascript and include an HTML icon inside

This Django project includes a JavaScript function that generates a new div to display certain data. for (var i = 0; i < files.length; i++) { var newDiv = document.createElement('div'); newDiv.setAttribute("class" ...

The function window.open when using the target '_blank' will launch a fresh browser window

I'm attempting to open a link in a new browser tab (not a new window). When I place a link on the page like this: <a href="#" onclick="window.open('http://www.google.com', '_blank');"> Click Here</a> when a user clic ...

Suggestion for implementing numerous ajax countdown timers (one call per second)

I am currently developing a system with 100 countdown timers that each make an ajax call every second to retrieve the endTime from the database and update the countdown time. The reason for calling this every second is because the endTime can be altered. ...

Transform jQuery timer functionality to support both minutes and seconds for redirecting, rather than just seconds

Recently, I stumbled upon a fantastic timer and redirect script based on jQuery from the talented folks over at the 'jQuery by Example' website. This script automatically redirects users after a specified number of seconds has elapsed: Here&apos ...

How can I allow scrolling within a specific div element?

Here is the structure of my layout: <html> <head> stuff goes here </head> <body> <div id="master"> <div id="toolbar"> <input type="text" id="foo"> </div> <div id="c ...

Limiting Access to Date Selector in Angular-UI-Bootstrap Date Picker Popup

Currently, I have the ability to select the year, then the month, and finally, the date. However, my requirement is limited to just selecting the month and year. I'm unsure of how to disable the date selector option. In addition, I wish to remove all ...

Handling errors in Javascript asynchronous functions at the point of invocation

Adding the keyword async to a function seems to require catching errors within that function. However, there are situations where it doesn't make sense to catch errors and defer them to the caller instead, especially when the context of the function c ...

Is there a way for me to delay the return from eval() until a callback is received?

A script in node.js has been created to retrieve JS code from a file and then run it through an eval(). The code that handles passing the JavaScript code to the eval function looks like this: // Read JavaScript code from a file var outputBuffer = '&ap ...

Leverage the controller's properties and methods within the directive

My situation involves a variety of inputs, each with specific directives: <input mask-value="ssn" validate="checkSsn"/> <input mask-value="pin" validate="checkPin"/> These properties are managed in the controller: app.controller("Ctrl", [&ap ...

Ways to terminate all AJAX requests within a for loop

Is there a way to cancel all AJAX requests that are being handled by a for loop? var url = ["www.example.com","www.example2.com",....]; for (var i = 0; i < url.length; i++) { var XHR = $.get(url[i], function(data) { //do something }); } I attemp ...

Tips for implementing an active class for td within jQuery tabs?

I'm currently using Jquery tabs within a table, and it's working fine. However, I need to activate the td when its link is clicked. Here's my code: $(document).ready(function() { $(".vertical_tabs_menu a").click(function(event) { ...

Incorporate fresh Google sites into different web pages using iFrame integration

Wishing you a fantastic day! I am currently working on embedding a brand new Google site into another webpage. I attempted to use an iframe for this purpose, but unfortunately it did not work as expected. Here is the code snippet: <iframe width="1280 ...

What is the best way to transfer data between functions?

I'm working on a fun Santa's game to play with my friends. The concept is simple: you enter your name, click a button, and a random name from the list will be displayed as the result. I've encountered a couple of challenges: I can succe ...

The type 'true | CallableFunction' does not have any callable constituents

The error message in full: This expression is not callable. No constituent of type 'true | CallableFunction' is callable Here is the portion of code causing the error: public static base( text, callB: boolean | CallableFunction = false ...

establish an online repository with a data storage system

As a beginner in web development, my goal is to design a website with a database that can house all archive files. I want users to have the ability to delete existing files and upload new ones directly from the web page. Utilizing HTML, CSS, and JavaScrip ...

Guide to changing the border color in a Material-UI TextField component styled with an outline design

To complete the task, utilize the Material UI outlined input field (TextField component from "@material-ui/core": "^4.12.2",) and apply a custom blue color style to it. Here is the outcome of my work: https://i.sstatic.net/lw1vC.png C ...

Make sure to always display the status bar and soft keys

Is there a way to set up my ionic app on Android so that the status bar is always displayed at the top and the soft keys are shown at the bottom? I attempted to add this line to the config.xml file, but it didn't work. <preference name="Fullscree ...

Refresh the content with an embedded iframe

I am attempting to update the body content by removing all existing content and inserting an iframe: function create_custom_iframe(target){ var iframe = document.createElement('iframe'); iframe.setAttribute('id', 'target_u ...

Tips for restricting function invocations in JavaScript?

I am seeking a function called limitCalls(fn, maxCalls) which accepts a function fn and creates a new function that can only be called the specified number of times in maxCalls. Here is a test example: it('limitCalls', () => { const makeIncre ...