CODEWITHSUNDEEP
javascriptangularjs
sudarsan
sudarsan

Reputation: 75

How to display digit always with two decimal places - Angularjs

I want to display digit always with two decimal values. I can display values with two decimal values.

$scope.value1 = 10000;
$scope.value2 = 12444.44443;

In controller I used 

$scope.value1 = $scope.value1.toFixed(2);
$scope.value2 = $scope.value2.toFixed(2);

Then in HTML, I can display as "10000.00" "12444.44". But its changing my model value also. I don't want to change the value. I want to display value only as "1000.00" "12444.44".

Even I tried as 

{{value1 | setDecimal : 2 }}
{{value2 | setDecimal : 2 }}

It displays as 

10000
12444.44

This setDecimal changes only my decimal value.

I want to display like setDecimal but need to display 10000 also as 10000.00.

Upvotes: 0

Views: 9711

Answers (4)

yadejo
yadejo

Reputation: 1968

You can use the number filter as a pipe in your template to achieve this:

angular.module('app', []).controller('MyCtrl', ['$scope', function($scope) {
  $scope.value1 = 10000;
  $scope.value2 = 12444.44443;
}]);
<div ng-app="app">
  <div ng-controller="MyCtrl">
    <p>{{ value1 | number: 2 }}</p>    
    <p>{{ value2 | number: 2 }}</p>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

Upvotes: 9

atiq1589
atiq1589

Reputation: 2327

Please see the code output. And I think this Documents is really helpful

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

<div ng-app> {{12342 | number: 2}}</div>

Upvotes: 2

Paritosh Mahale
Paritosh Mahale

Reputation: 1316

use toFixed(2) method for fixing it to two

Demo

parseFloat(Math.round(num3 * 100) / 100).toFixed(2);

Upvotes: 0

Roysh
Roysh

Reputation: 1550

value.toFixed(2)

should give what you need

Upvotes: 0

Related Questions