number - Eliminación del filtro de moneda AngularJS decimal/centavos

input currency angularjs

Question

¿Hay alguna manera de eliminar los decimales / centavos de la salida de un filtro de moneda? Estoy haciendo algo como esto:

<div>{{Price | currency}}</div>

Qué salidas:

$ 1,000.00

En cambio, me gustaría:

$ 1,000

¿Se puede hacer eso usando el filtro de moneda? Sé que puedo anteponer un signo de dólar a un número, y podría escribir mi propio filtro, pero esperaba que existiera un método simple con el filtro de moneda existente.

Gracias.

Answer 1

Y aquí si quieres redondear a los $ 1000 más cercanos: Demostración en vivo :

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

app.filter(''noFractionRoundUpCurrency'',
    [ ''$filter'', ''$locale'', function(filter, locale) {
      var currencyFilter = filter(''currency'');
      var formats = locale.NUMBER_FORMATS;
      return function(amount, currencySymbol) {
        var value = currencyFilter(amount, currencySymbol);
        var sep = value.indexOf(formats.DECIMAL_SEP);
        if(amount >= 0) { 
                    if (amount % 1000 < 500){
                        return ''$'' + (amount - (amount % 500));
                    } else {
                        return ''$'' + (amount - (amount % 500) + 500);          
                    }

        }
        else{
                    if (-amount % 1000 < 500){
                        return ''($'' + (-amount - (-amount % 500)) + '')'';
                    } else {
                        return ''($'' + (-amount - (-amount % 500) + 500)+ '')'';          
                    }
        }
      };
    } ]);

app.controller(''MainCtrl'', function($scope) {

});

Answer 2

Otra cosa que vale la pena considerar es que si usted sabe que solo tiene una configuración regional o un tipo de moneda, puede poner el símbolo de moneda antes del número y luego usar el filtro numérico de ese modo (para moneda estadounidense).

  ${{Price | number:0}}

Más una solución de solución rápida si no desea agregar un nuevo filtro y solo tiene una moneda.

Answer 3

¡Exactamente lo que necesitaba!

Agregué un condicional para reemplazar el filtro de divisas de Angular por completo y simplemente usar una versión modificada del filtro visto anteriormente por @Tom. Estoy seguro de que hay mejores formas de hacerlo, pero hasta ahora me ha funcionado bien.

''use strict'';
angular.module(''your-module'')
  .filter(''nfcurrency'', [ ''$filter'', ''$locale'', function ($filter, $locale) {
    var currency = $filter(''currency''), formats = $locale.NUMBER_FORMATS;
    return function (amount, symbol) {
      var value = currency(amount, symbol), valArr = value.split(formats.DECIMAL_SEP);
      if(parseInt(valArr[(valArr.length - 1)]) > 0) {
        return value;
      } else {
        return value.replace(new RegExp(''/' + formats.DECIMAL_SEP + ''/d{2}''), '''');
      }
    };
  }]);

Answer 4

Esta es otra solución similar, pero elimina .00 decimal, pero deja cualquier otra cantidad decimal.

$ 10.00 a $ 10

$ 10.20 a $ 10.20

app.filter(''noFractionCurrency'', [ ''$filter'', ''$locale'', function(filter, locale) {
    var currencyFilter = filter(''currency'');
    var formats = locale.NUMBER_FORMATS;
    return function(amount, currencySymbol) {
        amount = amount ? (amount*1).toFixed(2) : 0.00;
        var value = currencyFilter(amount, currencySymbol);
        // split into parts
        var parts = value.split(formats.DECIMAL_SEP);
        var dollar = parts[0];
        var cents = parts[1] || ''00'';
            cents = cents.substring(0,2)==''00'' ? cents.substring(2) : ''.''+cents; // remove "00" cent amount
        return dollar + cents;
    };
}]);

Answer 5

Otra solución, esta elimina los ceros finales y encuentra el símbolo de moneda adecuado para las monedas más comunes:

{{10.00 | dinero: USD}} a $ 10

{{10.00 | dinero: EUR}} a € 10

/**
 * @ngdoc filter
 * @name money
 * @kind function
 *
 * @description
 * Formats a number as a currency (ie $1,234.56), removing trailing zeros and using the     real currency symbol when possible. When no currency symbol is provided, default
 * symbol for current locale is used.
 *
 * @param {number} amount Input to filter.
 * @param {string=} symbol Currency symbol or identifier to be displayed.
 * @returns {string} Formatted number. *
 */
app.filter(''money'', [ ''$filter'', ''$locale'', function (filter, locale) {
var currencyFilter = filter(''currency'');
var formats = locale.NUMBER_FORMATS;

var getCurrencySymbol = function (code) {
    switch (code.toUpperCase()) {
        case ''EUR'': //Euro
            return ''€'';

        case ''USD'': //Dólar americano
        case ''MXN'': //Peso mejicano
        case ''CAD'': //Dólar de Canadá
        case ''AUD'': //Dólar australiano
        case ''NZD'': //Dólar neozelandés
        case ''HKD'': //Dólar de Hong Kong
        case ''SGD'': //Dólar de Singapur
        case ''ARS'': //Peso argentino
            return ''$'';

        case ''CNY'': //Yuan chino
        case ''JPY'': //Yen japonés
            return ''¥'';

        case ''GBP'': //Libra esterlina
        case ''GIP'': //Libras de Gibraltar
            return ''£'';

        case ''BRL'': //Real brasileño
            return ''R$'';

        case ''INR'': //Rupia india
            return ''Rp'';

        case ''CHF'': //Franco suizo
            return ''Fr'';

        case ''SEK'': //Corona sueca
        case ''NOK'': //Corona noruega
            return ''kr'';

        case ''KPW'': //Won de Corea del Norte
        case ''KRW'': //Won de Corea del Sur
            return ''₩'';

        default:
            return code;
    }
};

return function (amount, currency) {
    var value;
    if (currency) {
        value = currencyFilter(amount, getCurrencySymbol(currency));
    }
    else {
        value = currencyFilter(amount);
    }

    //Remove trailing zeros
    var regex = new RegExp("//" + formats.DECIMAL_SEP + "0+", "i");
    return value.replace(regex, '''');
};
} ]);

Answer 6

He modificado un poco el filtro publicado por @Liviu T. para aceptar monedas con símbolo después del número y cierta cantidad de decimales:

app.filter(''noFractionCurrency'',
[ ''$filter'', ''$locale'', function(filter, locale) {
  var currencyFilter = filter(''currency'');
  var formats = locale.NUMBER_FORMATS;
  return function(amount, num, currencySymbol) {
    if (num===0) num = -1;
    var value = currencyFilter(amount, currencySymbol);
    var sep = value.indexOf(formats.DECIMAL_SEP)+1;
    var symbol = '''';
    if (sep<value.indexOf(formats.CURRENCY_SYM)) symbol = '' ''+formats.CURRENCY_SYM;
    return value.substring(0, sep+num)+symbol;
  };
} ]);

Por ejemplo:

{{10.234 | noFractionCurrency:0}}
{{10.55555 | noFractionCurrency:2}}

Productos:

$10
$10.56

Manifestación

Answer 7

Actualización : a partir de la versión 1.3.0 - currencyFilter: agregue fractionSize como parámetro opcional, consulte commit y plunker actualizado

{{10 | currency:undefined:0}}

Tenga en cuenta que es el segundo parámetro, por lo que debe pasar indefinido para usar el símbolo de moneda de la configuración regional actual.

Actualización : tenga en cuenta que esto solo funciona con los símbolos de moneda que se muestran antes del número. A partir de la versión 1.2.9 todavía está codificado a 2 decimales.

Aquí hay una versión modificada que usa una copia de formatNumber de angular para habilitar 0 fractionSize para moneda.

Normalmente, esto debería ser configurable en la definición del entorno local o en la llamada del filtro de moneda, pero en este momento ( 1.0.4 ) está codificado a 2 decimales.

Filtro personalizado:

myModule.filter(''noFractionCurrency'',
  [ ''$filter'', ''$locale'',
  function(filter, locale) {
    var currencyFilter = filter(''currency'');
    var formats = locale.NUMBER_FORMATS;
    return function(amount, currencySymbol) {
      var value = currencyFilter(amount, currencySymbol);
      var sep = value.indexOf(formats.DECIMAL_SEP);
      if(amount >= 0) { 
        return value.substring(0, sep);
      }
      return value.substring(0, sep) + '')'';
    };
  } ]);

Modelo:

<div>{{Price | noFractionCurrency}}</div>

Ejemplo:

• Manifestación

Actualización : corrigió un error al manejar valores negativos

Answer 8

La pregunta parece ser bastante antigua y las respuestas dadas son agradables. Sin embargo, hay otra solución alternativa que también puede ayudar (que utilizo en mis proyectos).

Esto está funcionando muy bien con el prefijo de símbolos de moneda, así como con el sufijo del número de valores positivos y negativos.

Filtro personalizado:

angular.module(''your-module'', [])
    .filter(''nfcurrency'', [ ''$filter'', ''$locale'', function ($filter, $locale) {
        var currency = $filter(''currency''), formats = $locale.NUMBER_FORMATS;
        return function (amount, symbol) {
            var value = currency(amount, symbol);
            return value.replace(new RegExp(''//' + formats.DECIMAL_SEP + ''//d{2}''), '''')
        }
    }])

Modelo:

<div>{{yourPrice| nfcurrency}}</div>

Ejemplos para diferentes configuraciones regionales:

• 10.00 (en-gb) -> £ 10
• 20.00 (en-us) -> $ 20
• -10.00 (en-us) -> ($ 10)
• 30.00 (da-dk) -> 30 kr
• -30.00 (da-dk) -> -30 kr

Eche un vistazo a la demostración en vivo de dólares estadounidenses y danés Krone .

Actualizar

Tenga en cuenta que esta solución alternativa es buena para AngularJS 1.2 y versiones anteriores de la biblioteca. A partir de AngularJS 1.3 , puede utilizar el formateador de divisas con el tercer parámetro que especifica el tamaño de la fracción: "Número de decimales para redondear la cantidad a" .

Tenga en cuenta que para usar el formato de moneda predeterminado proveniente de la localización de AngularJS, debería usar el símbolo de moneda (segundo parámetro) configurado en undefined ( null o vacío NO funcionará). Ejemplo en demos para dólares estadounidenses y danés Krone .

Answer 9

Solución para la versión angular <1.3, si usa i18n de la manera más simple es:

$filter(''number'')(x,0) + '' '' +$locale.NUMBER_FORMATS.CURRENCY_SYM;

De esta manera, tendrá el número formateado con los separadores correctos y el símbolo de moneda según la configuración regional.

Answer 10

Para AngularJS 1.2, simplemente puede combinar filtros number y de currency

app.filter(''noFractionCurrency'', [''numberFilter'', ''currencyFilter'', function(numberFilter, currencyFilter) {
        return function(input, symbol) {
            var amount = numberFilter(input);
            return symbol + amount;
        };
    }]);

Answer 11

Si utilizara angular-i18n ( bower install angular-i18n ), podría usar un decorador para cambiar los valores predeterminados en los archivos de configuración regional, así:

$provide.decorator(''$locale'', [''$delegate'',
  function ($delegate) {
    $delegate.NUMBER_FORMATS.PATTERNS[1].maxFrac = 0;
    $delegate.NUMBER_FORMATS.PATTERNS[1].minFrac = 0;
    return $delegate;
}]);

Tenga en cuenta que esto se aplicaría a todos los usos del filtro de divisas en su código.

Answer 12

Es tarde, pero podría ser que puede ayudar a alguien

{{value | currency : ''Your Symbol'' : decimal points}}

Veamos algunos ejemplos con salida

{{10000 | currency : "" : 0}}           // 10,000
{{10000 | currency : ''$'' : 0}}          // $10,000 
{{10000 | currency : ''$'' : 2}}          // $10,000.00 
{{10000 | currency : ''Rs.'' : 2}}        // Rs.10,000.00
{{10000 | currency : ''USD $'' : 2}}      // USD $10,000.00
{{10000 | currency : ''#'' : 3}}          // #10,000.000
{{10000 | currency : ''ANYTHING: '' : 5}} // ANYTHING: 10,000.00000

Vea la demostración