AngularJS Convert Number to Currency Format and Limit to 2 Decimal Places

By: Suresh Dasari Mar 29, 2015

Introduction:

Here I will explain how convert number to currency format in AngularJS or limit number to display / show with 2 or two decimal places in AngularJS with required currency format. By using currency property in AngularJS we can convert number to currency format and limit number to display with decimal values.

Description:

In previous articles I explained Angularjs convert lower case to upper case while typing text, Angularjs refresh div for every 1 second using interval mode, 5 + Angularjs Gridview and table plugin examples with demos, jQuery redirect to another page after 5 seconds and many articles relating to AngularJS, jQuery, JavaScript and asp.net. Now I will explain how convert number to currency format and limit number to 2 decimal places in AngularJS.

To convert number to currency format and limit number to 2 decimal places in AngularJS we need to declare number like as shown below

Declaration to convert number to currency format

By using above expression we can display number like $124.56. Here currency_expression is the number and currency is formatting number and symbol is the required currency symbol and fractionsize is used to display required number of decimal places.

If you want to check it in complete example we need to write the code like as shown below

<head>

<title>Limit Number to 2 decmial places in Angularjs</title>

var myApp = angular.module('sampleapp', [])

myApp.controller("expressionController", function ($scope) {

$scope.amount = 1234.56;

});

</script>

</head>

<body>

default currency symbol ($): <span id="cdefault">{{amount | currency}}</span><br>

custom currency identifier (USD$): <span id="ccustom">{{amount | currency:"USD$"}}</span>

no fractions (0): <span id="cnofractions">{{amount | currency:"USD$":0}}</span>

no of fractions (1):<span id="cfractions">{{amount | currency:"USD$":1}}</span>

</div>

</form>

</body>

</html>

Live Demo

For live demo check below formatted output values based on textbox value

Enter Number
default currency symbol ($): {{amount | currency}}
custom currency identifier (USD$): {{amount | currency:"USD$"}}
no fractions (0): {{amount | currency:"USD$":0}}
no of fractions (1):{{amount | currency:"USD$":1}}