Looking to develop a currency converter using the angular ng-change directive and Ionic Framework.
Currently, I am able to input data into one textbox and see the expected changes in the other two textboxes. However, the issue arises when I try to switch to another textbox without refreshing the page - the functionality breaks down. Only one textbox works, or sometimes none of them update as expected.
Below is the code for my view:
<ion-content>
<h1>Enter Amount</h1>
<h3> Ether </h3>
<label class="item item-input">
<i class="icon ion-social-usd placeholder-icon"></i>
<input type="number" placeholder="ETH" ng-model="eth" ng-change="ethChange(eth)">
</label>
<h3> Chilean Peso (CLP) </h3>
<label class="item item-input">
<i class="icon ion-social-usd placeholder-icon"></i>
<input type="number" placeholder="CLP" ng-model="ethToCLP" ng-change="clpChange(ethToCLP)">
</label>
<h3> Dollars </h3>
<label class="item item-input">
<i class="icon ion-social-usd placeholder-icon"></i>
<input type="number" placeholder="USD" ng-model="ethToUSD" ng-change="usdChange(ethToUSD)">
</label>
</ion-content>
Controller
$scope.ethChange = function(eth) {
$scope.ethToCLP = eth * 30000
$scope.ethToUSD = eth * 50
};
$scope.usdChange = function(usd) {
$scope.eth = usd/50
$scope.ethToCLP = usd * 650
};
$scope.clpChange = function(clp) {
$scope.eth = clp/30000
$scope.ethToUSD = clp/650
};
The exchange rates are utilized for testing purposes only.
Various solutions on stackoverflow have been attempted, but none have proven effective for my case.
Thank you