rounding a number in input but keep full decimal value in model

Question

I hope that title made sense. Basically I have an small app that does various social security calculations. A user can enter information like birth date, gender, salary etc, and click "calculate social security" and their monthly social security payouts display in an input field. The user can also, if they choose, enter that number in manually. The problem is that the value for that calculation is used elsewhere in the app, so for accuracy, i think I need the full decimal value. But cosmetically, i only need it to the dollar value (2046 vs 2046.3339228485938 bla bla bla). I've seen several tutorials on writing directives for that but that will change the value in the model. It's crossed my mind that i may be going about this the wrong way entirely but i'm turning to stackoverflow in the hopes that this is a common issue that I just cant seem to find the right words for to google.

thanks, John

Answer 1

Yes, no need of custom filter for this purpose. Angular has its own filter to do this job. Try this one

<div ng-controller="Ctrl">{{dollar | number:2}}</div>

Answer 2

You can create specific filter, something like:

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

app.filter("rounded",function(){    
    return function(val,to){
        return val.toFixed(to || 0);
    }
});

function Ctrl($scope){
    $scope.dollar=2046.3339228485938;
}

And use it like:

<div ng-controller="Ctrl">{{ dollar | rounded:2 }}</div>

Example: http://jsfiddle.net/RdgR2/

Answer 3

The other answers aren't quite correct for this because the OP wants it on an input field, but the rounding to be display only.

Using parsers and formatters is a working approach. I found this snippet (https://www.snip2code.com/Snippet/43223/angular-directive-to-format-a-number-in-) and modified it.

Working fiddle is here: http://jsfiddle.net/2akaxojg/

.directive('inputCurrency', function ($filter, $locale) {
    return {
        terminal: true,
        restrict: 'A',        
        require: '?ngModel',
        link: function (scope, element, attrs, ngModel) {

            if (!ngModel)
                return; // do nothing if no ng-model

            // get the number format
            var formats = $locale.NUMBER_FORMATS;

            // fix up the incoming number to make sure it will parse into a number correctly
            var fixNumber = function (number) {
                if (number) {
                    if (typeof number !== 'number') {
                        number = number.replace(',', '');
                        number = parseFloat(number);
                    }
                }
                return number;
            }

            // function to do the rounding
            var roundMe = function (number) {
                number = fixNumber(number);
                if (number) {
                    return $filter('number')(number, 2);
                }
            }

            // Listen for change events to enable binding
            element.bind('blur', function () {                                
                element.val(roundMe(ngModel.$modelValue));
            });          

            // push a formatter so the model knows how to render
            ngModel.$formatters.push(function (value) {
                if (value) {
                    return roundMe(value);
                }
            });

            // push a parser to remove any special rendering and make sure the inputted number is rounded
            ngModel.$parsers.push(function (value) {
                return value;
            });
        }
    };
});