AngularJS : Filters - Currency

Different currency filter variations

by Sukanya Halder

HTML

<div class='description'>
  Usage : In HTML Template Binding
  <br />{{ currency_expression | currency : symbol : fractionSize}}
  <br />
  <br /> currency - the model that is bound to the value to be displayed
  <br />
  <br /> symbol - Currency symbol or identifier to be displayed.
  <br /> symbol could be left blank which will pick up the default from locale. If you want specific symbol you can pass the character entity reference of it if the symbol is not present in your keyboard.
  <br /> for eg. if you want pound (£) then you can write currency:"&pound;"
  <br /> for eg. if you want pound ABC then you can write currency:"ABC"
  <br /> <a href='https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references#Character_entity_references_in_HTML' target='_blank'>NOTE: Important currency symbols and their entity references</a>
  <br />
  <br /> fractionSize - Number of decimal places to round the amount to, defaults to default max fraction size for current locale.
  <br /> If fractionSize = 0 there will be no decimal places. eg $100
  <br /> If fractionSize = 1 there will be no decimal places. eg $100.0
  <br /> If fractionSize = 2 there will be no decimal places. eg $100.00
  <br /> If fractionSize = 5 there will be no decimal places. eg $100.00000
  <br /> If fractionSize = 18 there will be no decimal places. eg $100.000000000000000000
  <br /> If fractionSize = 19 there will be no decimal places. eg <b>$NaN.0000000000000000000</b>
  <br />
</div>

<div ng-app='myModule' ng-controller='myController'>
  Salary<span ng-model='salary'>{{salary}}</span>
  <br /> Salary with currency filter<span ng-model='salary'>{{salary|currency}}</span>
  <br /> Salary with currency filter and specific identifier USD$<span ng-model='salary'>{{salary| currency:"USD$"}}</span>
  <br /> Salary with currency filter and specific identifier £(pound)<span ng-model='salary'>{{salary| currency:"&pound;":0}}</span>
  <br /> Salary with currency filter and specific...

CSS

span {
  padding: 3px;
  margin: 12px;
  background: yellow;
}

a {
  font-family: verdana;
  font-weight: bold;
  font-size: 0.6em;
}

JavaScript

var app = angular.module('myModule', []);
app.controller('myController', ['$scope', function($scope) {
  $scope.salary = 10000000000000000000;
}]);