I'm struggling to get my two input fields to update values when the opposite input is changed.
My goal is to create a simple $dollar to Gold oz calculator with two input fields. You can see a sample preview here: http://embed.plnkr.co/dw6xL95zRqJC1pIlE1Kf/preview
The first input field is for the dollar amount, the second one is for the ounces amount. There is also a third variable that contains the gold selling rate.
In my code, I have managed to successfully change the Dollar amount and update the oz amount using angular's two-way data binding.
The issue arises when trying to make the opposite scenario work; for instance, changing the oz amount should automatically update the dollar amount.
Below is my HTML code:
<div class="row panel" ng-controller="ctrl">
<!-- Dollar input -->
<label class="small-6 columns">Dollar $:
<input type="number" ng-model="dollar">
</label>
<!-- Ounces input -->
<label class="small-6 columns">Ounces (oz):
<input type="number" value="{{ ozCalc() | number:4 }}">
</label>
</div>
And here is my AngularJS code:
var app = angular.module('app', []);
app.controller('ctrl', ['$scope', function($scope) {
$scope.dollar = 0;
$scope.oz = 0;
$scope.rate = 1267;
//Dollar to Ounce Calculator
$scope.ozCalc = function() {
var oz = $scope.dollar / $scope.rate;
return oz;
};
//Ounce to Dollar Calculator
$scope.dollarCalc = function() {
var dollar = $scope.oz * $scope.rate;
return dollar;
};
}]);
Any assistance on this matter would be greatly appreciated. Thank you!