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

Im testing the creation of a global style using styled-components

The component contains a render method, however, it does not inherit from React.Component

Refresh ng-repeat array after implementing filter in controller

Vue's smooth scrolling in Nuxt.js was not defined due to an error with the Window

Would it be frowned upon in JavaScript to use "if (somestring in {'oneoption':false, 'secondoption':false})"?

Step-by-step guide on integrating a specific location into Google Maps using React.js

Enhancing Website Interactivity with PHP, AJAX, and

Is there a way to generate bootstrap divs by parsing csv text?

Express route not capturing entire request parameter due to regex issue

Error message encountered in Rails Webpacker: "Uncaught TypeError: $(...).tooltip is not recognized as a function

Click on the links to view various captions for a single image, one at a time

Extract the price value from the span element, then multiply it by a certain number before adding it to a div element

The AJAX call to retrieve data from a file dynamically is experiencing issues

Utilize a singular ng-model for efficiently filtering and presenting filtered data

How can I change the background color of a parent div when hovering over a child element using JavaScript

Utilizing AngularJS, implement ng-form and ng-repeat to seamlessly handle input validation and submission actions

What discrepancies exist between running npm install on Windows versus Linux operating systems?

A simple way to verify which option has been chosen has been altered

Angular Selectable Drop-down Menu

Error occurred when attempting to fetch data from a nested JSON object in React/Next.JS