96

I have a float value for the ng-model that I would like to always display with 2 decimal places in the <input>: 

<input ng-model="myNumb" step ="0.01" type="number">

This works for most case when "myNumb" has decimal. But it will not force display of the 2 decimal places if "myNumb" has less than 2 decimal places (3.2), or an integer(30)
How can I force a display of 2 decimal place in the <input> field

Dale K
  • 25,246
  • 15
  • 42
  • 71
WABBIT0111
  • 2,233
  • 2
  • 18
  • 30

9 Answers9

88

AngularJS - Input number with 2 decimal places it could help... Filtering:

  1. Set the regular expression to validate the input using ng-pattern. Here I want to accept only numbers with a maximum of 2 decimal places and with a dot separator.
<input type="number" name="myDecimal" placeholder="Decimal" ng-model="myDecimal | number : 2" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" step="0.01" />

Reading forward this was pointed on the next answer ng-model="myDecimal | number : 2".

DIEGO CARRASCAL
  • 1,999
  • 14
  • 16
  • Done, sorry I didn't consider that because I thought that having it in context was better, but then again, you are right. – DIEGO CARRASCAL Feb 29 '16 at 14:23
  • 3
    that displays "1" instead of "1.00" – Rob Sedgwick Sep 21 '16 at 13:18
  • 8
    That doesn't work. It checks that the input has no more than 2 decimals, but doesn't change the displayed number to display the 2 decimals (even if those are 0) – David V. Oct 26 '16 at 12:36
  • use this directive var app = angular.module('app', []); app.controller('MainCtrl', function($scope) { $scope.data = { name: ''}; }); app.directive('changecase', function () { return { restrict: 'A', require: 'ngModel', link: function (scope, element, attrs, ngModel) { ngModel.$formatters.push(function(value) {debugger return Math.round(value * 100) / 100; }); } } }); – rahul rathore Mar 09 '17 at 06:03
  • 9
    Could you provide a jsfiddle? And as @jcc pointed out below, you can't use filters in ng-model. Doesn't work for me. – Eugene Kulabuhov May 05 '17 at 13:21
  • Remove type="number" – Jin Jun 04 '18 at 19:29
  • 2
    It's been mentioned elsewhere, but this doesn't work because an `input` of type `number` expects a `Number` as it's value, but the angular `number` filter returns a `String`. Suggesting to make the `input` type `text` is really just sidestepping the issue. – c24w Jan 10 '19 at 12:50
  • ngModel with myDecimal | number: 2 doesn't work. Error! Expression 'myDecimal | number: 2' is non-assignable. Element: – Maqbool Ahmed Mar 18 '20 at 07:13
84

If you are using Angular 2 (apparently it also works for Angular 4 too), you can use the following to round to two decimal places{{ exampleNumber | number : '1.2-2' }}, as in: 

<ion-input value="{{ exampleNumber | number : '1.2-2' }}"></ion-input>

BREAKDOWN

'1.2-2' means {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}:

  • A minimum of 1 digit will be shown before decimal point
  • It will show at least 2 digits after decimal point
  • But not more than 2 digits

Credit due here and here

maudulus
  • 10,627
  • 10
  • 78
  • 117
53
{{value | number : fractionSize}}

like {{12.52311 | number : 2}}

so this will print 12.52

Ashish Mukarne
  • 813
  • 8
  • 12
40

Simply use the number pipe like so :

{{ numberValue | number : '.2-2'}}

The pipe above works as follows :

  • Show at-least 1 integer digit before decimal point, set by default
  • Show not less 2 integer digits after the decimal point
  • Show not more than 2 integer digits after the decimal point
Mwiza
  • 7,780
  • 3
  • 46
  • 42
29

Did you try using the filter 

<input ng-model='val | number: 2'>

https://docs.angularjs.org/api/ng/filter/number

Yann Bertrand
  • 3,084
  • 1
  • 22
  • 38
Valter
  • 2,859
  • 5
  • 30
  • 51
  • 5
    this actually won't work, because i am using this will throw an error. and i cannot not use a type="number" in this case – WABBIT0111 Feb 23 '16 at 18:34
  • 18
    You can't do this in Angular, ng-model only accepts assignable expressions... https://docs.angularjs.org/error/ngModel/nonassign – jcc Jul 13 '16 at 23:58
  • Please see the below link http://stackoverflow.com/questions/30760310/number-filter-filters-number-down-to-two-decimals-but-does-not-display-it-that/42688335#42688335 – rahul rathore Mar 09 '17 at 06:34
  • 4
    in ng-model you can't use filter it's showing non-assign error – Siddharth Pandey Jun 02 '17 at 06:48
5

Another shorthand to (@maudulus's answer) to remove {maxFractionDigits} since it's optional.

You can use {{numberExample | number : '1.2'}}

Tatarin
  • 1,238
  • 11
  • 28
3

best way to Round off number to decimal places is that 

a=parseFloat(Math.round(numbertobeRound*10^decimalplaces)/10^decimalplaces);

for Example ;

numbertobeRound=58.8965896589;

if you want 58.90

decimalplaces is 2

a=parseFloat(Math.round(58.8965896589*10^2)/10^2);
Fabrizio
  • 7,603
  • 6
  • 44
  • 104
BALAGANESH
  • 31
  • 1
  • Hello and welcome to StackOverflow! Please review your answer and edit it. Please take a look at [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer) – Clijsters Apr 16 '18 at 08:36
0
(Math.round(2.782061 * 100) / 100).toFixed(2);

This will convert that into Two decimal places:

For example: 2.782061 ---> 2.78 two decimal Places

ggorlen
  • 44,755
  • 7
  • 76
  • 106
Syed Faran Raza
  • 19
  • 3
-2

Use currency filter with empty symbol ($) 

{{val | currency:''}}
brewsky
  • 607
  • 1
  • 9
  • 15
  • 3
    this actually won't work, because i am using this will throw an error. and i cannot not use a type="number" in this case – WABBIT0111 Feb 23 '16 at 18:34