How to display digit always with two decimal places - Angularjs

Question

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.

{{value1 | number: 2}} docs.angularjs.org/api/ng/filter/number . not sure where you saw the "setDecimal" pipe, but the "number" pipe should be enough here. — briosheje
– briosheje, Commented Aug 17, 2017 at 6:43
Besides, avoid using toFixed or whatever unless it's strictly needed: angularjs is heavy already, so avoid adding stuff that exists already. The number pipe was invented for such a scope, so just use it. — briosheje
– briosheje, Commented Aug 17, 2017 at 6:48

yadejo · Accepted Answer · 2017-08-17 07:03:57Z

9

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>

edited Aug 17, 2017 at 7:03

answered Aug 17, 2017 at 6:46

yadejo

1,96815 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Maxim Shoustin Over a year ago

before 3 min @brioseje answered in comment

yadejo Over a year ago

It should be posted as an answer, not a comment.

briosheje Over a year ago

@MaximShoustin that's fine. Yadejo: Please it would be worth to mention that it is a pipe in this case. Also, provide a fiddle to make the answer more complete.

yadejo Over a year ago

@briosheje I took your comment into account, hope you can agree with this answer.

briosheje Over a year ago

@yadejo yep, that's a complete answer :)

|

atiq1589 · Accepted Answer · 2017-08-17 06:48:50Z

2

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>

answered Aug 17, 2017 at 6:48

atiq1589

2,3351 gold badge19 silver badges25 bronze badges

Comments

Roysh · Accepted Answer · 2017-08-17 06:44:39Z

0

value.toFixed(2)

should give what you need

answered Aug 17, 2017 at 6:44

Roysh

1,5503 gold badges17 silver badges26 bronze badges

Comments

Paritosh Mahale · Accepted Answer · 2017-08-17 06:46:54Z

0

use toFixed(2) method for fixing it to two

Demo

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

answered Aug 17, 2017 at 6:46

Paritosh Mahale

1,3083 gold badges15 silver badges42 bronze badges

Collectives™ on Stack Overflow

How to display digit always with two decimal places - Angularjs

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related