Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

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

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

{{ currency_expression | currency : symbol : fractionSize}}
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


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Limit Number to 2 decmial places in Angularjs</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module('sampleapp', [])
myApp.controller("expressionController", function ($scope) {
$scope.amount = 1234.56;
});
</script>
</head>
<body>
<form id="form1">
<div data-ng-app="sampleapp" data-ng-controller="expressionController">
<input type="number" ng-model="amount"> <br/>
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}}

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

1 comments :

Anil Singh said...

Awesome post

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.