Saving the output of an AngularJS expression in an input field

Question

Saving the output of an AngularJS expression in an input field

Looking at the calculations below, I am currently evaluating an expression, {{ annualIncome * 4.5 }}, in one input and then re-evaluating the same expression in another input. Instead of saving the result and transferring it to the other input, I am repeating the calculation as I am unsure how to proceed.

For Example:

%label Equity Loan ({{ selectedLocation.loan }}%):
%input#equity_loan{ "disabled" => "disabled", "value" => "{{ selectedLocation.mortgage === 55 ? ((annualIncome * 4.5) / 11) * 9 : ((annualIncome * 4.5) / 15) * 4 }}" }

%label Mortgage ({{ selectedLocation.mortgage }}%):
%input#mortgage{ "disabled" => "disabled", "value" => "{{  annualIncome * 4.5 }}" }

I attempted to use ng-model but encountered difficulties making it work.

I also tried converting the values to currency by adding "| currency" at the end of my expression, which did not yield the desired outcome. I suspect this may be due to the need to convert each result individually

javascript css angularjs

Answer 1

Answer №1

While you cannot directly use variables in angular expressions, you can manipulate them in your controller once a specific variable, like annual income, is updated. This variable is typically linked to your view using the "ng-model" => "annualIncome" statement.

To recalculate values after a change, you can create a watch in your scope that triggers a function whenever the value is modified. If you prefer to add a delay before recalculating, you can utilize the debounce options available in ng-model-options. For example:

%input{"ng-model-options" => "{debounce: { 'default': 500, 'blur': 0 }}"}

This approach allows for better structuring by manipulating variables within your code.

$scope.$watch('annualIncome', function(value, oldValue) {
  var annualIncome = value; // equivalent to $scope.annualIncome
  var parts = selectedLocation.mortgage === 55 ? 11 : 15;
  var factor = selectedLocation.mortgage === 55 ? 9 : 4;
  var annualValue = annualIncome * 4.5;
  $scope.result = {
    propertyValue: annualValue + (annualValue / parts) + ((annualValue / parts) * factor),
    deposit: annualValue / parts
    // and more..
  };
});

With the result variable stored on the scope, you can bind it to your view using property binding.

%input#property_value{ "disabled" => "disabled", "value" => "{{ result.propertyValue }}" }

Answer 2

While you cannot directly use variables in angular expressions, you can manipulate them in your controller once a specific variable, like annual income, is updated. This variable is typically linked to your view using the "ng-model" => "annualIncome" statement.

To recalculate values after a change, you can create a watch in your scope that triggers a function whenever the value is modified. If you prefer to add a delay before recalculating, you can utilize the debounce options available in ng-model-options. For example:

%input{"ng-model-options" => "{debounce: { 'default': 500, 'blur': 0 }}"}

This approach allows for better structuring by manipulating variables within your code.

$scope.$watch('annualIncome', function(value, oldValue) {
  var annualIncome = value; // equivalent to $scope.annualIncome
  var parts = selectedLocation.mortgage === 55 ? 11 : 15;
  var factor = selectedLocation.mortgage === 55 ? 9 : 4;
  var annualValue = annualIncome * 4.5;
  $scope.result = {
    propertyValue: annualValue + (annualValue / parts) + ((annualValue / parts) * factor),
    deposit: annualValue / parts
    // and more..
  };
});

With the result variable stored on the scope, you can bind it to your view using property binding.

%input#property_value{ "disabled" => "disabled", "value" => "{{ result.propertyValue }}" }

Saving the output of an AngularJS expression in an input field

Answer №1

Similar questions

Tips for fixing the issue of "The use of getPreventDefault() is outdated. Please use defaultPrevented instead."

Ways to unmark the "select all" checkbox when any one of its children is no longer selected

Showing information to several classes using JavaScript

What is the best way to incorporate async/await in a useEffect hook in a React Native application?

Mixing elements from the entire webpage

How can data be transferred from a parent component to a child component using MaterialUI's styling functionality?

What is the best way to improve the design of this division that includes buttons?

Update the icon with the adjusted API information

Exploring the scope of the modalInstance received from ui-bootstrap's $modal.open() function

ng-click="showInventory()" onClick="currentTemplate='/inventory.html'" Not

Sending JSON Data with Javascript Post Request

Verify in JavaScript if the script is executing within a WinStore (WinJS) program

What is the syntax for creating a for loop in JSX within a React component?

I'm having issues with my pop method - it doesn't seem

Design a dynamic top navigation bar in Angular or any other framework that automatically adjusts to the size of the screen, similar to the responsive bookmarks bar in

What is the best way to experiment with angular-ui-tinymce within a tabset using Plunker?

Error message: "An issue occurred with the Bootstrap Modal in

Error Found: AngularJS Error State

Calculating the time gap between two consecutive "keyup" occurrences

Slicing an array in Javascript/Angular before it is officially initialized