2014-12-18 32 views
27

Come spostare il simbolo euro dalla parte anteriore del valore a dopo?Valuta Js angolare, simbolo euro dopo

Esempio:

{{product.price | currency : "€"}} produrrà € 12.00

ma vorrei 12.00 €

+2

Per la cronaca, la scrittura ufficiale è € 12,00, non il contrario. – Kriem

+0

per quanto io ami AngularJS, queste cose di uso quotidiano dovrebbero essere coperte o tralasciate del tutto. Solo per anteporre un segno $ a UNA valuta è solo inutile. Questo dovrebbe essere localizzato. – Andreas

+0

Ulteriori letture su https://docs.angularjs.org/guide/i18n –

risposta

17

Non è possibile con il filtro di valuta. Puoi scrivere il tuo o semplicemente usare il filtro numerico.

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

+1

In realtà è possibile. L'utilizzo del supporto i18n di angolari funziona alla grande con il filtro valuta e come previsto: http://stackoverflow.com/a/34953870/555274 –

+1

è il modo più semplificato: '{{produce.price | numero: 2}} € –

2

uso questo trucco.

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

Le soluzioni proposte sono tutte sporche.

in un primo momento, il filtro permettono cambiamento simbolo per aggiungerlo come parametro:

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

ma il modo giusto è localizzare la vostra applicazione, come suggerito dal @Andreas se localizzare la vostra applicazione, ad esempio con impostazioni locali italiane (it-it) all'interno della tua app devi solo richiamare il filtro per ottenere il simbolo €.

{{product.price | currency }} 

Le impostazioni internazionali italiane inseriscono il simbolo dell'euro prima del valore della valuta. Si potrebbe cambiare il Che valore di localizzazione, o molto meglio ignorare loro come proposto nella risposta legata seguire:

Why AngularJS currency filter formats negative numbers with parenthesis?

si poteva ignorare l'impostazione locale mettere il simbolo di valuta (\ u00A4) come prefisso o suffisso per valore positivo e negativo anche.

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

così dopo questa istruzione il filtro:

{{product.price | currency}} 

produrrà l'uscita follow

€ 12 
-2

Io uso questa soluzione nel mio progetto (in produzione), in Francia (Si deve Mostra SEMPRE 5.00 €, NON mostra MAI € 5,00):

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

DEMO

Si prega di leggere il vero problema di questo post (angolare valute JS, simbolo di euro dopo) prima downvote troppo in fretta !!!!!

+0

Negli Stati Uniti, il segno $ è prima del numero. In Europa il segno € è SEMPRE dopo il numero => $ 5,00 - 5,00 € – sgrillon

+1

@webdevbyjoss, Deve SEMPRE mostrare 5,00 € anche negli Stati Uniti. – sgrillon

+0

@webdevbyjoss, leggi la domanda: 'produrrà € 12,00, ma vorrei 12,00 €' – sgrillon

1

E 'piuttosto una vecchia questione, è diverso in questi giorni .. Forse lo era allora partecipavano ..

Quindi, se qualcun altro trova questo ..

Ma è necessario includere le impostazioni internazionali corrette per ottenere la corretta formattazione della valuta nel filtro valuta.

Consultare la documentazione angolare, ad esempio la formattazione di valuta olandese è di € 5,00 mentre l'inglese è di 5,00 € e americani è di € 5,00

+0

Suggerimento: sarebbe stato carino collegare alla sezione citata nel documento angolare. ;) –

48

Non hai per incidere il filtro valuta!

AngularJS ha un ottimo supporto per i18n/l10n. Il filtro di valuta utilizza il simbolo di valuta predefinito dal servizio di impostazioni internazionali e lo posiziona in base alle impostazioni internazionali.

Quindi si tratta di supportare e impostare il locale giusto.

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

Se si utilizza npm o bower tutte le versioni locali sono disponibili tramite il angular-i18npackage.

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

sarà ora produrre il seguente output:

65,95 € 

supporto di più localizzazioni

Se si desidera supportare più localizzazioni stare attenti con il simbolo di valuta come cambia la valuta di default delle impostazioni locali utilizzate. Ma 65,95 € sono diversi da $65,95. Fornire il simbolo di valuta come parametro per essere sicuri:

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

Nel de-de l'uscita sarebbe ancora 65,95 € ma se la posizione è ad es. en-us sarebbe €65.95 (che è, nonostante alcuni altri detti the correct format to display euro prices in English).

Per ulteriori informazioni su angolare e i18n/l10n, fare riferimento allo developer guide.

+1

Sì. La posizione dell'euro non dipende solo dal paese ma anche dalle impostazioni locali. Un grande esempio è il Belgio con olandese e francese. Abbiamo continuato a ricevere segnalazioni di bug che dovrebbero essere lasciati, no ... no! DESTRA SINISTRA!!?!?! OMG .... Ho lasciato la compagnia da allora e loro non hanno ancora deciso:> – ppumkin

-1

È possibile creare un filtro:

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

e applicarlo sul codice HTML con:

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

Utilizzando la locale (come spiegato nella risposta in questa discussione - a Angular Js currency, symbol euro after) sembra il più modo corretto per farlo, ma non sembra offrire la flessibilità di mettere il simbolo della valuta o il nome dove lo si desidera rispetto al valore a cui si sta facendo riferimento. Se è necessario disporre del simbolo di valuta dopo il valore, è possibile avere un campo separato product.currency e interpolare dopo (o prima) il valore del prezzo.

Quindi, se si dispone di product.price = 40 e product.currency = '€', è possibile visualizzarlo come 40 € con {{product.price}} {{product.currency}}. O € 40 invertendo i campi: {{product.currency}} {{product.price}}.

Probabilmente vorreste formattare i valori product.price tramite la virgola decimale se lo avete fatto (https://angular.io/api/common/DecimalPipe). - Quindi "40,00 €" sarebbe: {{product.amount | number:'2.2-2'}} {{product.currency}}.

FYI - in questo caso, probabilmente avere un campo separato product.currency e product.currencySymbol (ad esempio "USD" e "$", rispettivamente), ma poi si sta sempre più nella funzionalità del locale come riferimento nel altra risposta che link sopra. Ma se hai bisogno di posizionare il nome o il simbolo della valuta in una posizione diversa rispetto al valore di quello che Angular ti consente di fare tramite le sue pipe native, e vuoi usare una valuta specifica per un record o un set con cui stai lavorando senza hard-coding il suo simbolo o nome sulla pagina (ad esempio se hai più valute che stai visualizzando), questo è un modo per farlo dinamicamente.

0

Angularjs ha un grande supporto per l'internazionalizzazione e la localizzazione. L'applicazione di internazionalizzazione e localizzazione dipende dallo scopo dell'applicazione. Ad esempio se la tua applicazione supporta solo euro allora hai solo bisogno della localizzazione per euro e non richiede tutta la valuta e la sua formattazione.

In tale situazione (supponendo che la situazione sia simile a quella precedente) è possibile creare una configurazione dell'app e impostare le impostazioni locali come la localizzazione richiesta utilizzando alcuni decoratori. Una funzione decoratore intercetta la creazione di un servizio, permettendogli di sovrascrivere o modificare il comportamento del servizio.

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 configurazione di cui sopra mostra tutti i possibili valori per le impostazioni decimali e valutarie. È possibile modificare in base alle proprie esigenze a livello di app.

Se non volete l'effetto di essere in tutta l'applicazione migliore è di andare per una direttiva

Problemi correlati