Number format without group separator

[Shyamsundar S]

Hi,

I'm new to anuglar.js. I like to know, how to specify a number without group separation format.

For e.g:
12345678.01234

If I specify particular {{ var1 | number }} , comes with comma(,) separation for en and dot(.) separation for es locale.

I came to know that, the existing API doesn't support the custom number formatting. I like to know, how to overwrite the existing API to support the custom number formatting.

Please help me out!!

[Shyamsundar S]

Atlast I myself found the solution.

There are 2 approaches,

1. simply update the $locale group separation to "", but it is a bad approach.

angular.module("app").controller("myController", function ($scope, $http, $sce, $locale, $timeout) {

    $locale.NUMBER_FORMATS.GROUP_SEP = ""; //This will override the group_sep value to empty string

//Rest of the code

});

2. Create a custom number filter and use the customNumber in the application, In this case you ll get the complete control.

Here is the sample, but I just copied formatNumber function from the angular itself.

angular.module("app").filter('customNumber', function ($locale) {

    var formats = $locale.NUMBER_FORMATS;

    var DECIMAL_SEP = '.';

    return function (number, fractionSize) {

        return formatNumber(number, formats.PATTERNS[0], "", formats.DECIMAL_SEP,

          fractionSize, DECIMAL_SEP);

    };

    

    function formatNumber(number, pattern, groupSep, decimalSep, fractionSize, DECIMAL_SEP) {

        if (number == null || !isFinite(number) || typeof number === 'object') return '';

        var isNegative = number < 0;

        number = Math.abs(number);

        var numStr = number + '',

            formatedText = '',

            parts = [];

        var hasExponent = false;

        if (numStr.indexOf('e') !== -1) {

            var match = numStr.match(/([\d\.]+)e(-?)(\d+)/);

            if (match && match[2] == '-' && match[3] > fractionSize + 1) {

                numStr = '0';

                number = 0;

            } else {

                formatedText = numStr;

                hasExponent = true;

            }

        }

        if (!hasExponent) {

            var fractionLen = (numStr.split(DECIMAL_SEP)[1] || '').length;

            // determine fractionSize if it is not specified

            if (typeof fractionSize === 'undefined') {

                fractionSize = Math.min(Math.max(pattern.minFrac, fractionLen), pattern.maxFrac);

            }

            // safely round numbers in JS without hitting imprecisions of floating-point arithmetics

            // inspired by:

            // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round

            number = +(Math.round(+(number.toString() + 'e' + fractionSize)).toString() + 'e' + -fractionSize);

            var fraction = ('' + number).split(DECIMAL_SEP);

            var whole = fraction[0];

            fraction = fraction[1] || '';

            var i, pos = 0,

                lgroup = pattern.lgSize,

                group = pattern.gSize;

            if (whole.length >= (lgroup + group)) {

                pos = whole.length - lgroup;

                for (i = 0; i < pos; i++) {

                    if ((pos - i) % group === 0 && i !== 0) {

                        formatedText += groupSep;

                    }

                    formatedText += whole.charAt(i);

                }

            }

            for (i = pos; i < whole.length; i++) {

                if ((whole.length - i) % lgroup === 0 && i !== 0) {

                    formatedText += groupSep;

                }

                formatedText += whole.charAt(i);

            }

            // format fraction part.

            while (fraction.length < fractionSize) {

                fraction += '0';

            }

            if (fractionSize && fractionSize !== "0") formatedText += decimalSep + fraction.substr(0, fractionSize);

        } else {

            if (fractionSize > 0 && number > -1 && number < 1) {

                formatedText = number.toFixed(fractionSize);

            }

        }

        parts.push(isNegative ? pattern.negPre : pattern.posPre);

        parts.push(formatedText);

        parts.push(isNegative ? pattern.negSuf : pattern.posSuf);

        return parts.join('');

    }

});

<div>

      {{itemValue | customNumber}}

</div>

[Sander Elias]

hi Shyamsundar,

Your #1 is plain unworkable. have a look at the i18n stuff from angular. I think for most of what you need you just need to load another locale.

Your #2 will work. And while your sample will take (on first sight) in account most, if not all, edge-cases, it is a lot of code. It might be that you need all of this, but for just some number formatting, it is a lot.
Most users will never hit the exponents. And while it’s very flexible, and you can choose whatever formatting you like, it might be a better idea to just code for the case you have, in stead of creating a solution for every possible use-case.

meaning, if you have 2 numbers to display on the page, this is not an issue. If you have to display a few hundreds of numbers, all those extra processing cycles will add up.
a simple formatter like this:

   function myFormat() {
       return myFormatter;

       function myFormatter(num) {
           if (!angular.isNumber(num)) {
               // don't process anything that's not a number
               return num;
           }
           var string=''+Math.round(+num * 100);
           var len = string.length;
           var l = len;
           var result = [];
           while (--l>-1) {
               result.unshift('' + string[l]);
               if (len-l===2) {
                   //decimail point
                   result.unshift(',');
               } else if (l > 0 && (len-l-2)%3 === 0 ) {
                   // separator
                   result.unshift('.');
               }
           }
           return result.join('');
       }
   }

Will do in most cases, (see it in action)

Does this help a bit?
Regards
Sander

​