it-swarm.com.de

AngularJS Währungsfilter dezimal/Cent entfernen

Gibt es eine Möglichkeit, die Dezimal/Cents aus der Ausgabe eines Währungsfilters zu entfernen? Ich mache so etwas:

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

Welche Ausgänge:

1.000,00 $

Stattdessen möchte ich:

1.000 Dollar

Kann das mit dem Währungsfilter gemacht werden? Ich weiß, dass ich einer Zahl ein Dollarzeichen voranstellen kann, und ich könnte meinen eigenen Filter schreiben, aber ich hatte gehofft, dass eine einfache Methode mit dem vorhandenen Währungsfilter existiert.

Vielen Dank.

64
Mike Pateras

Update: ab Version - 1.3.0 - currencyFilter: füge FraktionSize als optionalen Parameter hinzu, siehe commit Und aktualisiert plunker

{{10 | currency:undefined:0}}

Beachten Sie, dass dies der zweite Parameter ist. Sie müssen also undefined übergeben, um das Währungssymbol des aktuellen Gebietsschemas verwenden zu können

Update: Beachten Sie, dass dies nur für Währungssymbole funktioniert, die vor der Zahl angezeigt werden . Ab Version 1.2.9 ist es noch immer mit 2 Dezimalstellen hart codiert.

Here ist eine modifizierte Version, die eine Kopie von Winkels formatNumber verwendet, um für die Währung 0 fractiesize zu aktivieren.


Normalerweise sollte dies entweder in der Gebietsschemadefinition oder im CurrencyFilter-Aufruf konfiguriert werden können, aber jetzt (1.0.4) ist es auf 2 Dezimalstellen hartcodiert.

Benutzerdefinierte Filter:

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) + ')';
    };
  } ]);

Vorlage:

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

Beispiel:

Update: Fehler beim Umgang mit negativen Werten behoben

114
Liviu T.

Die Frage scheint ziemlich alt zu sein und die Antworten sind nett. Es gibt jedoch eine andere alternative Lösung, die auch helfen kann (die ich in meinen Projekten verwende).

Dies funktioniert sehr gut, wenn Währungssymbole vorangestellt werden und die Zahl für positive und negative Werte angehängt wird.

Benutzerdefinierte Filter:

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}'), '')
        }
    }])

Vorlage:

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

Beispiele für verschiedene Ländereinstellungen:

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

Bitte sehen Sie sich die Live-Demo für US-Dollar und Danish Krone an.

Update

Beachten Sie, dass diese Problemumgehung für AngularJS 1.2 und frühere Versionen der Bibliothek gut ist. Ab AngularJS 1.3 können Sie currency formatter mit dem dritten Parameter verwenden, der die Bruchgröße angibt - "Anzahl der Dezimalstellen, auf die der Betrag gerundet werden soll)"

Beachten Sie, dass Sie für die Verwendung des Standard-Währungsformats aus der AngularJS-Lokalisierung ein Währungssymbol (zweiten Parameter) verwenden müssen, das auf undefined gesetzt ist (null oder leer funktioniert NICHT). Beispiel in Demos für US-Dollar und Danish Krone .

32
Tom

Wenn Sie wissen, dass Sie nur ein Gebietsschema oder eine Währungsart haben, könnten Sie das Währungssymbol vor die Nummer setzen und dann den Zahlenfilter wie für US-Währung verwenden.

  ${{Price | number:0}}

Eine schnelle Lösung, wenn Sie keinen neuen Filter einsetzen möchten und nur eine Währung haben.

29
JM Huret

Es ist spät, aber es kann jemandem helfen

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

Schauen wir uns einige Beispiele mit Ausgabe an

{{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

Siehe die Demo

17
Ali Adravi

Dies ist eine andere, ähnliche Lösung, entfernt jedoch .00 Dezimalstellen, belässt jedoch alle anderen Dezimalzahlen.

$ 10 bis $ 10

10,20 bis 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;
    };
}]);
5
Dustin

Lösung für die Winkelversion <1.3, Wenn Sie i18n verwenden, ist der einfachste Weg:

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

Auf diese Weise haben Sie die Nummer mit korrekten Trennzeichen und Währungssymbolen basierend auf der Ländereinstellung formatiert.

3
AndreiC

Eine andere Lösung, diese entfernt die nachgestellten Nullen und findet das richtige Währungssymbol für die am häufigsten verwendeten Währungen:

{{10.00 | Geld: USD}} bis 10 USD

{{10.00 | Geld: EUR}} bis 10 EUR

/**
 * @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, '');
};
} ]);
3
Javier Marín

Für AngularJS 1.2 können Sie einfach number und currency Filter kombinieren

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

Wenn Sie angle-i18n (bower install angular-i18n) verwenden, können Sie die Standardeinstellungen in den Länderdateien mithilfe eines Dekorators ändern:

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

Beachten Sie, dass dies für alle in Ihrem Code verwendeten Währungsfilter gelten würde.

2
Dormouse

Ich habe den von @Liviu T. geposteten Filter ein wenig geändert, um Währungen mit einem Symbol nach der Anzahl und einer bestimmten Anzahl von Dezimalstellen zu akzeptieren:

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;
  };
} ]);

Zum Beispiel: 

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

Ausgänge:

$10
$10.56

Demo

2
bertslike

Genau das was ich brauchte!

Ich fügte eine Bedingung hinzu, um den Währungsfilter von Angular einfach zu ersetzen und eine modifizierte Version des Filters von @Tom zu verwenden. Ich bin sicher, dass es bessere Möglichkeiten gibt, dies zu tun, aber es scheint mir bisher gut zu gehen.


'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}'), '');
      }
    };
  }]);

2
Smccullough

Und hier, wenn Sie auf die nächsten $ 1000 aufrunden wollen: Live Demo

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) {

});
2
David Dehghan

In Angular 4+

{{totalCost | currency : 'USD' : 'symbol' : '1.0-0' }}
0
Andrew Koper