javascript - number - formato moneda angular

Moneda Js angular, símbolo euro después

Question

¿Cómo mover el símbolo del euro desde el frente del valor hasta después?

Ejemplo:

{{product.price | currency : "€"}} {{product.price | currency : "€"}} producirá € 12.00

pero me gustaria 12.00 €

Answer 1

Angularjs tiene un gran apoyo para la internacionalización y localización. La aplicación de internacionalización y localización depende del alcance de su aplicación. Por ejemplo, si su aplicación solo admite euro, entonces solo necesita la localización para el euro y no requiere toda la moneda y su formato.

En tal situación (suponiendo que su situación sea similar a la anterior), puede crear una configuración de aplicación y establecer la configuración regional como la localización que necesita utilizando algunos decoradores. Una función decoradora intercepta la creación de un servicio, lo que le permite anular o modificar el comportamiento del servicio.

angular
  .module(''app'', [])
  .config([''$provide'', function($provide) {
    $provide.decorator(''$locale'', [''$delegate'', function($delegate) {
      $delegate.NUMBER_FORMATS = {
        DECIMAL_SEP: ''.'',
        GROUP_SEP: '','',
        PATTERNS: [{ // Decimal Pattern
          minInt: 1,
          minFrac: 0,
          maxFrac: 3,
          posPre: '''',
          posSuf: '''',
          negPre: ''-'',
          negSuf: '''',
          gSize: 3,
          lgSize: 3
        }, { //Currency Pattern
          minInt: 1,
          minFrac: 0,
          maxFrac: 1,
          posPre: ''/u00A4'',
          posSuf: '''',
          negPre: ''(/u00A4'',
          negSuf: '')'',
          gSize: 3,
          lgSize: 3
        }],
        CURRENCY_SYM: ''€''
      }
      return $delegate;
    }]);
  }])
  .controller(''appController'', [''$scope'', function($scope) {
    $scope.price = 20.55;
  }])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="appController">
    Price : {{price | currency}}
  </div>
</div>

La configuración anterior muestra todos los valores posibles para la configuración decimal y de moneda. Puede cambiar según sus requisitos a nivel de aplicación.

Si no desea que el efecto esté en toda la aplicación mejor, vaya a una directiva

Answer 2

El uso de la locale (como se explica en la respuesta en este hilo, en la moneda Angular Js, símbolo euro después ) parece ser la forma más correcta de hacerlo, pero no parece ofrecer la flexibilidad para poner el símbolo o el nombre de la moneda donde lo quiere en relación con el valor al que hace referencia. Si necesita tener su símbolo de moneda después de su valor, podría tener un campo de moneda de product.currency separado e interpolarlo después (o antes) del valor de su precio.

Entonces, si tiene product.price = 40 y product.currency = ''€'' , puede mostrarlo como 40 € con {{product.price}} {{product.currency}} . O 40 € invirtiendo los campos: {{product.currency}} {{product.price}} .

Probablemente desee formatear los valores de product.price través de la tubería decimal si lo hizo ( https://angular.io/api/common/DecimalPipe ). - Entonces "40.00 €" sería: {{product.amount | number:''2.2-2''}} {{product.currency}} {{product.amount | number:''2.2-2''}} {{product.currency}} .

Para su información, en este caso, probablemente tendría un campo separado product.currency y product.currencySymbol (p. ej., "USD" y "$" respectivamente), pero luego obtendrá más información sobre la funcionalidad de la locale como se menciona en el Otra respuesta que enlace arriba. Pero si necesita colocar el nombre o símbolo de la moneda en una ubicación diferente en relación con el valor que Angular le permitirá hacer a través de sus canales nativos, y desea usar una moneda que sea específica para un registro o conjunto con el que está trabajando sin codificar su símbolo o nombre en la página (por ejemplo, si tiene varias monedas que está mostrando), esta es una forma de hacerlo dinámicamente.

Answer 3

Es una pregunta bastante antigua, es diferente en estos días ... Tal vez fue en ese entonces también ...

Entonces, si alguien más encuentra esto ...

Pero debe incluir la configuración regional correcta para obtener el formato de moneda correcto en el filtro de moneda.

Consulte la documentación angular, por ejemplo, el formato de moneda holandesa es de € 5,00, mientras que el inglés es de 5,00 € y el estadounidense es de € 5,00

Answer 4

Las soluciones propuestas son todas sucias.

Al principio, el filtro permite cambiar el símbolo agregándolo como parámetro:

{{product.price | currency : "€"}}

pero la forma correcta es localizar su aplicación como lo sugiere @Andreas si localiza su aplicación, por ejemplo, con la configuración regional italiana (it-it) dentro de su aplicación, solo necesita invocar el filtro para obtener el signo €.

{{product.price | currency }}

La configuración regional italiana pone el símbolo del euro antes del valor de la moneda. Puede cambiar el valor de configuración regional, o mucho mejor anularlos como se propone en la siguiente respuesta vinculada:

¿Por qué el filtro de moneda AngularJS formatea números negativos con paréntesis?

puede anular la configuración regional y poner su símbolo de moneda (/ u00A4) como prefijo o sufijo para el valor positivo y negativo también.

app.config([''$provide'', function($provide) {
    $provide.decorator(''$locale'', [''$delegate'', function($delegate) {
      if($delegate.id == ''it-it'') {
            $delegate.NUMBER_FORMATS.PATTERNS[1].negPre = ''/u00A4/u00a0-'';
            $delegate.NUMBER_FORMATS.PATTERNS[1].negSuf = '''';
            $delegate.NUMBER_FORMATS.PATTERNS[1].posPre = ''/u00A4/u00a0'';
            $delegate.NUMBER_FORMATS.PATTERNS[1].posSuf = '''';
      }
      return $delegate;
    }]);
  }]);

entonces después de esta instrucción el filtro:

{{product.price | currency}} 

producirá el siguiente resultado

€ 12

Answer 5

No puedes con el filtro de moneda. Puede escribir el suyo o simplemente usar el filtro de números.

{{(produce.price | number:2) + "€"}}

Answer 6

Puedes crear un filtro:

app.filter(''euroFormat'', function () {
    return function (input) {
        return input+'' /u20AC'';
    };
});

y aplícalo en tu código html con:

<span>Price: {{product.price| euroFormat}}</span>

Answer 7

Utilizo esta solución en mi proyecto (en producción) en Francia ( SIEMPRE debe mostrar 5.00 €, NUNCA debe mostrar € 5.00 ):

<span>Price: {{product.price| currency:""}} €</span>

DEMO

¡Por favor, lea la pregunta real de esta publicación ( moneda Angular Js, símbolo euro después ) antes de votar demasiado rápido !!!!!

Answer 8

usa este truco.

<div>{{product.price | currency : '''' }} €</div>

Answer 9

¡No tienes que hackear el filtro de divisas!

AngularJS tiene un gran soporte para i18n / l10n. El filtro de moneda utiliza el símbolo de moneda predeterminado del servicio de configuración regional y lo posiciona según la configuración de la configuración regional.

Por lo tanto, se trata de admitir y establecer la configuración regional correcta.

<script src="i18n/angular-locale_de-de.js"></script>

Si está utilizando npm o npm todas las configuraciones regionales están disponibles a través del package angular-i18n .

<span>{{ product.price | currency }}</span>

ahora producirá el siguiente resultado:

65,95 €

Soportando múltiples localizaciones

Si desea admitir varias localizaciones, tenga cuidado con el símbolo de moneda, ya que cambia a la moneda predeterminada de la configuración regional utilizada. Pero 65,95 € son diferentes a $65,95 . Proporcione el símbolo de moneda como parámetro para estar seguro:

<span>{{ product.price | currency:''€'' }}</span>

En de-de la salida seguiría siendo 65,95 € pero si la ubicación es por ej. en-us sería €65.95 (que a pesar de algunos otros dichos es el formato correcto para mostrar los precios del euro en inglés ).

Para obtener más información sobre angular e i18n / l10n, consulte la docs.angularjs.org/guide/i18n .