determining the equivalence of two input fields

I have two text boxes with different ng-models. They populate using a $http.get request when a button is clicked.

Let's assume:

<input type="text" ng-model="name.title" />
<input type="text" ng-model="name.surname" />

These are successfully filled from my JSON data.

The value of name.title may sometimes be like "abc (123)". If a user edits this, I want the name.surname to become the part inside the (). If they remove "abc (123)" and simply type in 123, then 123 should reflect in name.surname.

I've experimented with various combinations using ng-blur and ng-change but haven't had any success so far.

Since it's just two textboxes, creating a new directive seems unnecessary.

How can I achieve this?

Any assistance would be greatly appreciated. :)

javascriptangularjs

Answer №1

It seems like you are using Angular 1.x.

You can create a watch function for the name variable like this:

$scope.$watch('[name.title, name.surname]', function(newValue, prevValue) {
     if (newValue === prevValue) {
        return;
     }
     //Add your logic here to update the models
});

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

Shadow typing, also known as type over words, is a method where the

I am currently tackling a project focused on language acquisition, including German, Chinese, and more. We are encountering difficulties with one specific feature - the ability to display "ghost" text (in a very faint grey) for users to type over. With th ...

javascriptjquerytyping

What is the correct process for submitting an HTML form following the loading of asynchronous data?

I've been searching high and low, but I can't seem to find the solution to my problem. I've scoured search engines and Stack Overflow with no luck. My dilemma is this: How can I trigger the submission of an HTML form only after asynchronous ...

javascripthtmlformsasynchronous

What is the best way to link my React application with my Express API?

I've been immersed in my react app project for a while now, and I've recently delved into developing a server (using node and express) as well as planning to incorporate a database for it (MongoDB). My client-side react app has been smoothly run ...

javascriptreactjsexpress

"In Internet Explorer, the option tag can be set to display as either block or

Here is an updated issue related to my previous question. I currently have a flawless code (DEMO) that works perfectly in Chrome and Firefox. However, it does not function properly in Internet Explorer. This is because IE does not support the use of displ ...

javascriptjqueryhtmlcssinternet-explorer

Encountering a Module Error in AngularJS and Laravel Blade when Altering the interpolateProvider (Delimiter)

I am facing a peculiar issue when I try to integrate Laravel 5 (with Blade) and Angular 1.3 together. While I am well-versed with Laravel, I am relatively new to Angular. I understand that in order to make Angular work seamlessly with Laravel's Blade ...

angularjslaravel-5delimiterlaravel-bladeangularjs-interpolate

Trumbowyg plugin fails to display button panel on the interface

I've implemented a JavaScript plugin called Trumbowyg to create an HTML Editor (WYSIWYG). Despite no errors occurring during the instantiation and creation of elements with this plugin, I am facing an issue where the panel displaying buttons/options f ...

javascriptjqueryhtmlcsstrumbowyg

The stacking order of elements is not affected by the z-index property when using absolute positioning

I have developed a unique custom toggle switch component with the following structure: <template> <div> <label class="switch"> <input type="checkbox" :checked="value" @c ...

javascripthtmlcssvue.js

Retrieve the user currently using Ionic Firebase

I'm trying to fetch and display the current user on my page using Firebase, but I seem to be missing something. I've followed the documentation and used {{}} but it's not working as expected. Can someone provide me with an example or point o ...

angularjsionic-frameworkfirebasefirebase-authentication

Need to update the dropdown selections once the flag has been modified

I am facing an issue in AngularJS where I am using the select function with a group by feature. Depending on a flag value from the database, I need to either hide or show certain options within the select dropdown. However, since the flag takes some time t ...

angularjsdrop-down-menu

Encountering JS issues when attempting to utilize Laravel mix or webpack

I am currently working with a webpack mix file that has the following setup. let mix = require('laravel-mix'); let basePath = 'app/Resources/assets/sass/'; let jsPath = 'app/Resources/assets/js/'; mix.setPublicPath(&apo ...

javascriptjquerywebpacklaravel-mixpjax

What are the steps to configure Satellizer to utilize absolute URLs?

I'm currently in the process of creating a registration form using satellizer library, however, I am running into some issues with setting up the correct URL. Upon checking my console, I am seeing the following error message: POST http://localhost ...

angularjscontrollerforms-authenticationoauth-providersatellizer

AngularJS - Verifying duplicate emails upon blur within a custom directive

Encountered an issue where I needed to check if an email was already registered in the database, but only on blur event and not on every change. To solve this problem, I created a reusable directive for my app. However, the directive keeps checking even be ...

angularjsuniqueblurdirective

The Mongoose function findbyIdAndRemove is currently not working properly when triggered on the client-side

I have a specific route in my app that uses the mongoose method findByIdAndRemove. Strangely, when I test this route using postman, it successfully deletes documents from my database. However, when I try to call this method from my client-side JavaScript f ...

javascriptnode.jsmongoose

Error: OBJLoader is not defined in Three.js

I've been trying to learn Three.js by following various tutorials, but I keep encountering an error message that says Uncaught ReferenceError: OBJLoader is not defined when I attempt to use my own .obj file. I've tried different approaches to fix ...

javascripthtmlthree.js

Continuously invoking a function until jQuery's .post method has completed loading

As I am diving into the world of jQuery framework, I encountered a situation where I used the readyState() function while working with AJAX in regular JavaScript to display a loading gif image. However, when transitioning to using jQuery's .post() met ...

javascriptjqueryajax

How can I trigger an API call 30 seconds after my React Native app switches to the background?

Seeking assistance with my React Native app: I am trying to make an API call 30 seconds after the app goes into the background. I am using AppState from react-native to detect when the app goes into the background, but I'm not receiving any callback a ...

javascriptreact-native

Exploring Nodejs: What exactly is the Reflect function used for?

While diving into the nodejs source code in the events.js module, I frequently came across the mysterious Reflect function. However, I have yet to uncover its definition. Could someone shed some light on what this function actually does? ...

javascriptnode.js

Include various categories into the div containers of the listed items within the query outcomes

Is there a way to customize div styles based on query results? I want to differentiate the styles of divs in the result list based on their content. For example: I'd like bird names in the result list to have different div styles compared to other a ...

javascriptphpjqueryhtmlcss

Best Practices for Installing Webpack in a Client/Server Folder Structure

Working on a React Nodejs web application and in the process of figuring out how to bundle the frontend using webpack. This is how my project's structured: Where exactly do I need to install webpack and configure webpack.config.js? I've noticed ...

javascriptnode.jsreactjswebpack

Angular, update data origin

I am currently facing a challenge in finding a solution to a specific situation. Our system server continues to update logs regularly. However, the presentation of these logs is not efficient and appears messy. This has sparked the idea for creating a web ...

angularjsunixlogging