How to show number
with two decimal places in AngularJS 1.0
Introduction:
Here solution of display number with 2 decimal
places in AngularJs and Html view. So first I find all solutions. Finally I
find out shortest trick to display number with 2 decimal places in angularJS.
Solution Steps:
Step 1: Create simple html page.
index.html
<html>
<head>
<title>Decimal places by RAJESH GAMI</title>
</head>
<body>
<div>
<p> Hello I am Rajesh Gami, Here is solution
of display number with two decimal places using AngularJS </p>
<h3></h3>
</div>
</body>
</html>
Step 2: Now add script link of AngularJS under <head>
tag in our index.html page
Angular.min.js
:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
Step 3: Now we add angular-animate.js under
<head>tag.
Angular animate use for animation in html, there are two
way to make use of animation 1. CSS and
2.JavaScript. When we use angular animate.js our output will display
using AngularJS 1.0.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-animate.js"></script>
Step 4: now we give name of data-ng-app and data-ng-controller
in html page.
See like
this:
Index.html
<html data-ng-app="DecimalModule">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-animate.js"></script>
</head>
<body data-ng-controller="DecimalController">
<div>
<p> Hello I am Rajesh Gami, Here is solution
of display number with two decimal places using AngularJS </p>
<h3></h3>
</div>
</body>
</html>
Step 5: Now we create new AngularJS file name: controller.js
And save file in your folder
Step 6 : Now first
add app module in controller.js
Controller.js
(function () {
app = angular.module("DecimalModule", ['ngAnimate']);
})();
In above module code in DecimalModule module name, we give this name in html file(data-ng-app="DecimalModule").
And ngAnimate use for animation. The ngAnimate module provides support for CSS-based
animations (keyframes and transitions) as well as JavaScript-based animations
via callback hooks. Animations are not enabled by default, however, by
including ngAnimate the animation hooks are enabled for an
AngularJS app.
Step 7: Now we
create controller in controller.js file after angular-module.
app.controller("DecimalController", function ($scope)
{
});
Step 8: Now we add logic for two decimal spaces in
app.controller
1.
First add variable Result
$scope.Results = "";
2.
Now we add percentage variable and store
percentage
var percentage = (6 * 100) / 7;
answer is : 85.71428571428571.
but we want to display only 85.71 so we add
below code
3.
Now variable percentage do as fixed for two
decimal places.
var result = percentage.toFixed(2);
this code use to fixed two decimal place.
Now answer is : 85.71
4.
Now we store last result in another
scope.Result.
$scope.Results = "Your Result: " + result + " %";
Complete Controller.js file
Controller.js
(function () {
app = angular.module("DecimalModule", ['ngAnimate']);
})();
app.controller("DecimalController", function ($scope) {
$scope.Results = "";
var percentage = (6 * 100) / 7;
var result = percentage.toFixed(2)
$scope.Results = "Your
Result: " + result + " %";
});
Step 9: Now add
controller.js in to html script.
<script type="text/javascript" src="controller.js"></script>
Step 10: Now we want to
display our result so that, add {{
Result }} in our html page in any tag in between<body>.
<h3>{{Results }}</h3>
Complete index.html page
code.
Index.html
<html data-ng-app="DecimalModule">
<head>
<title>Decimal places by RAJESH GAMI</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script type="text/javascript" src="controller.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-animate.js"></script>
</head>
<body data-ng-controller="DecimalController">
<div>
<p> Hello I am <b>Rajesh Gami</b>, Here is solution of display number with two decimal
places using AngularJS </p>
<p> {{Results }}</p>
</div>
</body>
</html>
Conclusion:
Here I will try to easiest way for
display number two decimal places. I hope you guys will help this angularJS
code and very well understand this code. If any doubt then tell me I will solve
it.
