Is there a way to automatically change the value of one input box to its negative counterpart when either of the two input boxes have been filled in?

Question

Is there a way to automatically change the value of one input box to its negative counterpart when either of the two input boxes have been filled in?

Consider two input boxes:

box1
box2

If a user enters a number in one of the input boxes, we want the value of the other input box to automatically change to the opposite sign of that number.

For example:

User enters 3 in box1. The value of box2 should change to -3.
User enters -5 in box1. The value of box2 should change to 5.

How can we implement this functionality using AngularJS 1.x?

javascript angularjs

Answer 1

Answer №1

Here are a couple of methods to achieve this:

To start, you can add a watch in your controller for the values of num1 and num2. It would look something like this (assuming $scope is injected into your controller)

Sample HTML

<input type="number" ng-model="num1">
<input type="number" ng-model="num2">

Sample JS

$scope.$watch('num1', function(newVal){
  $scope.num2 = -newVal;
}

$scope.$watch('num2', function(newVal){
  $scope.num1 = -newVal;
}

This method is recommended if you plan on using the controller with multiple views or if there is a relationship between the model data (num1 and num2). The watches will trigger whenever the numbers change for any reason (other bindings, manual changes in JavaScript, etc).

Alternatively, you can use ng-change on your input fields to set the value in an angular expression

Sample HTML

<input type="number" ng-model="num1" ng-change="num2=-num1">
<input type="number" ng-model="num2" ng-change="num1=-num2">

This approach is ideal if you only need to focus on one number, or if this logic specifically belongs in the view. It may also be more efficient as it listens for the change event instead of checking for equivalence every digest cycle. However, keep in mind that if either number changes through means other than altering the input field directly, the change will not be reflected. Thanks to Manatax for highlighting most of these benefits in the comments below.

Answer 2

Here are a couple of methods to achieve this:

To start, you can add a watch in your controller for the values of num1 and num2. It would look something like this (assuming $scope is injected into your controller)

Sample HTML

<input type="number" ng-model="num1">
<input type="number" ng-model="num2">

Sample JS

$scope.$watch('num1', function(newVal){
  $scope.num2 = -newVal;
}

$scope.$watch('num2', function(newVal){
  $scope.num1 = -newVal;
}

This method is recommended if you plan on using the controller with multiple views or if there is a relationship between the model data (num1 and num2). The watches will trigger whenever the numbers change for any reason (other bindings, manual changes in JavaScript, etc).

Alternatively, you can use ng-change on your input fields to set the value in an angular expression

Sample HTML

<input type="number" ng-model="num1" ng-change="num2=-num1">
<input type="number" ng-model="num2" ng-change="num1=-num2">

This approach is ideal if you only need to focus on one number, or if this logic specifically belongs in the view. It may also be more efficient as it listens for the change event instead of checking for equivalence every digest cycle. However, keep in mind that if either number changes through means other than altering the input field directly, the change will not be reflected. Thanks to Manatax for highlighting most of these benefits in the comments below.

Is there a way to automatically change the value of one input box to its negative counterpart when either of the two input boxes have been filled in?

Answer №1

Similar questions

How to create a looping animation effect for a div using CSS on hover

Switch up the like button for users who have previously liked a post

A step-by-step guide to accessing Chrome performance metrics using JavaScript

Tips for populating countryList data in Form.Select component within a React.js application

Is searching for duplicate entries in an array using a specific key?

AngularJS - Always keep an eye on a group of items

What is the best way to verify the presence of a value in an SQL column?

Issue with Vuejs where changes are made to the parent array, but the child component does not detect those

What is the best strategy for managing pagination when dealing with a large number of pages?

Tried to enroll the RCTBridgeModule category as RCTFileReaderModule

Do we need to use aria-labelledby if we already have label and input associated with "for" and "id"?

The jQuery onClick function functions effectively for the initial two clicks; however, it ceases to

Retrieve the structure from a React application

Utilizing GeoLocation in JavaScript: Implementing a Wait for $.ajax Response

Express along with Cheerio and JSDOM

Personalize JSON Reporter to Display Captured Information - WebdriverIO

Why are the buttons on my HTML/JavaScript page not functioning properly?

Tips for shifting a div to the left with AngularJS

Recording Audio Using ReactJS

Guide on transferring a JWT token to a Node.js backend