Storing AngularJS expression result in input

Question

As you can see from below, I am calculating an expression, {{ annualIncome * 4.5 }}, in one input, and recalculating the same expression in another input, instead of storing the result of the expression and passing it to the other input as I am unsure of how to do that.

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 have tried ng-model, but it doesn't seem to work.

Also, I have tried to change the values to a currency by adding "| currency" onto the end of my expression, which also didn't work, but I'm guessing it might be because I need to convert each expression result?

That doesn't look like valid HTML. Are you using a templating framework? — Patrick
– Patrick, Commented Apr 28, 2016 at 11:11
You could calculate the value in your controller scope, or use controller as and save it in the controller directly. How are you hooking up angular? Where are you defining your controller and your app? Why or how are the things not working, do you get a crash? an error? nothing? — Patrick
– Patrick, Commented Apr 28, 2016 at 11:14
@Patrick I have the full project on Codepen, it's in HAML - codepen.io/wilcode/pen/RajNjE. I was originally going to pass the information into a function and calculate it there, but I was having trouble in understanding how I can pass the variable to the function, and then return the result to another input. — wilcode
– wilcode, Commented Apr 28, 2016 at 11:25

Patrick · Accepted Answer · 2016-04-28 11:59:21Z

Well, you can't use variables in angular expressions, but you could do it in your controller after the annual income variable is changed; which is bound to in your view using the "ng-model" => "annualIncome" statement.

In order to calculate values after changing a value, you could set up a watch in your scope. The function will be called each time the value is updated. If you want to add a delay and not calculate it immediately you can use the debounce options in ng-model-options; example:

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

Then it's simply a way of structuring your code using variables.

$scope.$watch('annualIncome', function(value, oldValue) {
  var annualIncome = value; // same as $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 so on..
  };
});

Since the result variable is set on the scope, you can bind to it in your view using property binding.

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

Collectives™ on Stack Overflow

Storing AngularJS expression result in input

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related