AngularJS Simple Example

by djp3d

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div ng-app ng-controller="CurrencyController" ng-init="init(50)">
  <form>
    <div class="form-row">
      <div class="form-group col-md-3">
        <label for="inputCity">Annual Subscription (HKD)</label>
        <input type="number" class="form-control" id="subscription" ng-model="price" readonly>
      </div>
      <div class="form-group col-md-5">
        <label for="inputState">Currency</label>
        <select class="form-control" ng-model="currencyFilter" ng-options="key as key+' ('+value+')' for (key, value) in currencies">
        </select>
      </div>
      <div class="form-group col-md-2">
        <label for="inputZip">Conversion ({{currencyFilter}})</label>
        <input type="number" class="form-control" ng-model="conversion" id="output" readonly>
      </div>
      <div class="form-group col-md-2">
        <label for="convert">Update</label>
        <button class="form-control btn btn-primary">Update</button>
      </div>
    </div>
  </form>
</div>

JavaScript

function CurrencyController($scope,$http) {

  $scope.currencyFilter = "GBP";
  $scope.conversion = 0;
  $scope.price = 0;
  
  $scope.init = function(val) {
  	$scope.price = val;
  }

  $scope.currencies = {
    "AUD": "Australian Dollar",
    "BGN": "Bulgarian Lev",
    "BRL": "Brazilian Real",
    "CAD": "Canadian Dollar",
    "CHF": "Swiss Franc",
    "CNY": "Chinese Yuan",
    "CZK": "Czech Republic Koruna",
    "DKK": "Danish Krone",
    "EUR": "Euro",
    "GBP": "British Pound Sterling",
    "HKD": "Hong Kong Dollar",
    "HRK": "Croatian Kuna",
    "HUF": "Hungarian Forint",
    "IDR": "Indonesian Rupiah",
    "ILS": "Israeli New Sheqel",
    "INR": "Indian Rupee",
    "ISK": "Icelandic Króna",
    "JPY": "Japanese Yen",
    "KRW": "South Korean Won",
    "MXN": "Mexican Peso",
    "MYR": "Malaysian Ringgit",
    "NOK": "Norwegian Krone",
    "NZD": "New Zealand Dollar",
    "PHP": "Philippine Peso",
    "PLN": "Polish Zloty",
    "RON": "Romanian Leu",
    "RUB": "Russian Ruble",
    "SEK": "Swedish Krona",
    "SGD": "Singapore Dollar",
    "THB": "Thai Baht",
    "TRY": "Turkish Lira",
    "USD": "United States Dollar",
    "ZAR": "South African Rand"
  };

  $scope.$watch('currencyFilter', function(newValue, oldValue) {
    $http({
      method: 'GET',
      url: 'https://api.exchangeratesapi.io/latest?base=HKD&symbols='+newValue
    }).then(function successCallback(response) {
      $scope.conversion = response.data.rates[$scope.currencyFilter] * $scope.price;
    }, function errorCallback(response) {

    });
  });
}