Friday, 18 May 2018

How to show number with two decimal places in AngularJS 1.0


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.

















RAJESH GAMI - Blog

How to show number with two decimal places in AngularJS 1.0

How to show number with two decimal places in AngularJS 1.0 Introduction:             Here   solution of display number with 2 deci...