whole number pad with zeros

Question

I have a directive that convert to 2 decimal places (input number textbox) and it is working well but I would like to pad the whole number with zeros.

Anyone knows how I can achieve whole number with padded zeros? Example below.

2 -> 2.00 - not done
10.666 -> 10.67 - done

app.directive('toPrecision',['$filter', function ($filter) {
    return {
        replace: false,
        restrict: 'A',
        link: function(scope, element, attr) {
            var input = angular.element(element);
            var precisionValue = attr.toPrecision;
            input.on('keyup', function() {
                var parsed = parseFloat(input.val());
                if (!isNaN(parsed)) {
                    if (parseInt(parsed, 10) !== parsed && String(parsed).split('.')[1].length > 2) {
                        var result = parsed.toFixed(precisionValue);
                        input.val(result);
                    }
                }
            });
        }
    }
}]);

HTML

<input type="number" class="form-control" ng-model="rate" to-precision="2" min="0" step="1">

Possible duplicate of [Javascript: formatting a rounded number to N decimals](http://stackoverflow.com/questions/2221167/javascript-formatting-a-rounded-number-to-n-decimals) — djechlin, Dec 16 '15 at 05:11
This is a duplicate of this question: http://stackoverflow.com/questions/2221167/javascript-formatting-a-rounded-number-to-n-decimals — djechlin, Dec 16 '15 at 05:11
@epascarello toFixed(2) does not convert the whole number 2 to 2.00 — ove, Dec 16 '15 at 05:21
@in_visible [Are you sure about that?](http://i.imgur.com/yRzXEpS.png) Do you realize that to have the `.00` it needs to be a string? — epascarello, Dec 16 '15 at 05:23
If you want the textbox to show trailing zeros, you might want to put in a feature request with all the browsers. — epascarello, Dec 16 '15 at 05:33

score 1 · Accepted Answer · answered Dec 17 '15 at 03:11

Ended rewriting the directives for what I want.

app.directive('toPrecision', function() {
return {
    replace: false,
    restrict: 'EA',
    require: 'ngModel',
    link: function(scope, element, attr, ngModelCtrl) {
        var input = angular.element(element);
        var precisionValue = attr.toPrecision;

        ngModelCtrl.$parsers.push(function(value) {
            var clean = value.replace(/[^-0-9\.]/g, '');
            if (value !== clean) {
                ngModelCtrl.$setViewValue(clean);
                ngModelCtrl.$render();
            }
            return clean;
        });

        ngModelCtrl.$formatters.push(function(value) {
            if (angular.isUndefined(value)) {
                return "";
            }
            var parsed = parseFloat(value);
            return parsed.toFixed(precisionValue);
        });

        input.on('blur', function() {
            var parsed = parseFloat(input.val());
            if (!isNaN(parsed)) {
                var result = parsed.toFixed(precisionValue);
                input.val(result);
                ngModelCtrl.$setViewValue(result);
            }
        });

    }
}});

score 0 · Answer 2 · answered Dec 16 '15 at 05:12

0

Here's code to do it taken from the answer I voted to close as duplicate:

var s = number.toString();
if (s.indexOf('.') == -1) s += '.';
while (s.length < s.indexOf('.') + 4) s += '0';

answered Dec 16 '15 at 05:12

djechlin

59,258
35
162
290

I dont think it is what i want – ove Dec 16 '15 at 05:18
I like whenever the user typed a whole number like 2. It converts it to 2.00 – ove Dec 16 '15 at 05:19

snvrthn · Answer 3 · 2015-12-16T07:59:46.100

0

Let math do it, Try this.

if (!isNaN(parsed)) {
    parsed += Math.pow(10, -1 * (precisionValue + 2)); // 2 + 0.0001
    var result = parsed.toFixed(precisionValue); // 2.00
    input.val(result);
}

See fiddle

edited Dec 16 '15 at 07:59

answered Dec 16 '15 at 06:28

snvrthn

385
1
10

whole number pad with zeros

3 Answers3