AngularJS two way binding math operations

Question

I'm trying to build a currency converter, let's say, from Euro to USD using AngularJS' two way data binding such that when input Euro amount is changed, target USD amount, too, will change.

Here's what I have. It populates usd_amount field with the same value as eur_amount as I type:

<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
</head>
<body>
<form action="/action_page.php">
<div ng-app>
  You pay (EUR):
  <input id="eur_amount" type="number" ng-model="eur_amount"><br>
  You get (USD):
  <input id="usd_amount" type="number" value="{{eur_amount}}"><br> <!-- {{eur_amount * 1.2 }}  -->
  <input type="submit" value="Submit">
</div>
</form> 
</body>
</html>

How can I multiply {{eur_amount}} variable with exchange rate, $rate, which is a PHP variable constructed earilier, to get usd_amount?

EDIT
Laravel's Blade templating engine and Angular use the same markup when displaying variables {{variableName}}. As I'm using Laravel, to access variable with [[variableName]], I added scripts as follows:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script>
var toAmountCalculator = angular.module('toAmountCalculator', [], function($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
    $scope.rate = '<?php echo $rate; ?>';
});
</script>

I can use {{rate}} (which is Blade's markup) to display $rate PHP variable. How can I display exchange rate with AngularJS' [[rate]]?

Ashish Santikari · Accepted Answer · 2018-06-04 12:44:24Z

1

Keep the exchange rate in a scope variable and use * operator to multiple the same.

{{usd_amount * exchange_rate}}

answered Jun 4, 2018 at 12:44

Ashish Santikari

4534 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rahul Patel · Accepted Answer · 2018-06-04 12:45:16Z

0

You can use {{eur_amount * 1.2 }} in value attribute. Or you can assign a separate ng-model to the USD input, and apply a ng-change function to update the USD ng-model.

answered Jun 4, 2018 at 12:45

Rahul Patel

6396 silver badges12 bronze badges

Collectives™ on Stack Overflow

AngularJS two way binding math operations

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related