JSFiddle - React, Tailwind, and code Playground
CURRENCY CONVERSION angular factory
by Andrew Pougher
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div ng-app="invoice2" ng-controller="InvoiceController as invoice" class="panel panel-default clearfix">
<div class="panel-body">
<b>Invoice:</b>
<div>
Quantity:
<input class="form-control input-sm" type="number" min="0" ng-model="invoice.qty" required>
</div>
<div>
Costs:
<input class="form-control input-sm" type="number" min="0" ng-model="invoice.cost" required>
<select ng-model="invoice.inCurr">
<option ng-repeat="c in invoice.currencies">{{c}}</option>
</select>
</div>
<div>
<b>Total:</b>
<span ng-repeat="c in invoice.currencies" class="col-xs-4">
{{invoice.total(c) | currency:c}}
</span>
<button class="btn" ng-click="invoice.pay()">Pay</button>
</div>
</div>
</div>
</div>
JavaScript
angular.module('invoice2', ['finance2'])
.controller('InvoiceController', ['currencyConverter', function(currencyConverter) {
this.qty = 1;
this.cost = 1.00;
this.inCurr = 'USD';
this.currencies = currencyConverter.currencies;
this.total = function total(outCurr) {
return currencyConverter.convert(this.qty * this.cost, this.inCurr, outCurr);
};
this.pay = function pay() {
window.alert("Thanks!");
};
}]);
angular.module('finance2', [])
.factory('currencyConverter', function() {
var currencies = ['USD', 'EUR', 'GBR', 'CNY'];
var usdToForeignRates = {
USD: 1,
EUR: 0.94,
GBR: 0.80, // 1 dollar to the british pound is currently 80p
CNY: 6.85
};
var convert = function(amount, inCurr, outCurr) {
return amount * usdToForeignRates[outCurr] / usdToForeignRates[inCurr];
};
return {
currencies: currencies,
convert: convert
};
});