prevent input[type=number] from automatically rounding off floating point values

Question

Is there a way to prevent floating point values from being rounded off when used as values for input[type=number]. I cannot use any other type as per requirement.

For example, I cannot bind an input[type=number] with value "3.00", it is automatically rounded off to "3".

I am trying to bind values using angularjs.

angular.module('app', [])
.controller('controller1', ['$scope', function ($scope){
  $scope.value=3.00;
}]);

<div ng-app="app" ng-controller="controller1">
  <input type="number" ng-model="value" /><br/>
  {{value}}<br/>
</div>

this is the link to the PEN : http://codepen.io/cyrilpanicker/pen/aqucJ?editors=101

Make it a string then parse the string if you ever need to perform calculations on it. — bowheart
– bowheart, Commented Sep 20, 2014 at 22:33
u mean remove the type="number" attribute? can't do that coz type="number" is a requirement.. — Cyril
– Cyril, Commented Sep 20, 2014 at 22:34
Sorry, that would probably be very undesirable. But yes, you'd have to take off type="number"...unless you brought in hefty amounts of jquery.. — bowheart
– bowheart, Commented Sep 20, 2014 at 22:39
if type = number is a requirement, and you want to use float values, then some more information is needed, as type=number is specifically meant to only use integer values. — chiliNUT
– chiliNUT, Commented Sep 20, 2014 at 22:54
If you really want to support, it on input (on display anyways you could use filter, if it is editable field then it is probably not needed to show 3.00 as 3.00) you may want to reformat it after ngModel is done. It is the ngModel evaluation that is rounding it off. I have posted an answer, possibly that might work. — PSL
– PSL, Commented Sep 20, 2014 at 23:00

PSL · Accepted Answer · 2014-09-20 22:58:17Z

1

That is because of the ngModel rounds off the value after it is parsed. One workaround could be to handle it using a custom directive with lower priority (-1) than ngModel (which runs at priority 0) so that it runs after ngModel has parsed. And in the directive register a formatter which will use number filter to reformat the input's modelvalue.

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  $scope.value=3.00;
}).directive('formatNum', function(numberFilter){
  return {
    priority:-1, //<-- Important
    require:'ngModel',
    link:function(scope, elm, attrs, ngModel){
        ngModel.$formatters.push(format); //Push a formatter
        function format(){
          return numberFilter(ngModel.$modelValue , 2); //Round off to 2 dec
        }
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller= "MainCtrl">
<input type="number" ng-model="value" format-num/><br/>
  {{value | number:2}}<br/>
</div>

edited Sep 20, 2014 at 22:58

answered Sep 20, 2014 at 22:51

PSL

124k21 gold badges257 silver badges243 bronze badges

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

1 Comment

PSL Over a year ago

Use this if you really really want to have the editable field have that trivial .00. Probably it is not really worth doing that at all, for readonly fields you can anyways use number filter.

Rhumborl · Accepted Answer · 2014-09-20 22:43:49Z

0

You can use the number filter to format the number when you display it. {{value | number:2}} will always show it with 2dp:

<div ng-app="app" ng-controller="controller1">
  <input type="number" ng-model="value" /><br/>
  {{value | number:2}}<br/>
</div>

answered Sep 20, 2014 at 22:43

Rhumborl

16.7k4 gold badges41 silver badges47 bronze badges

1 Comment

PSL Over a year ago

OP wants the formatting on the input's value not on the display.

Collectives™ on Stack Overflow

prevent input[type=number] from automatically rounding off floating point values

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related