Corsi on-line

Formattazione valutaria con AngularJS

Il framework JavaScript AngularJS mette a disposizione dei filtri appositamente dedicati alle divise monetarie; tali costrutti prendono il nome di currency filter è hanno il compito di formattare un numero sotto forma di un’espressione valutaria, come per esempio il prezzo di un determinato bene o servizio. Nell’esempio proposto in questo articolo creeremo una piccola applicazione in grado di moltiplicare il prezzo unitario di un prodotto per la quantità scelta dall’utente e di restituire tale risultato formattato in modo che riporti il simbolo della divisa di riferimento e sostituisca il “.” alla “,” che separa i decimali dagli interi.

AngularJS-largeIl filtro denominato currency prevede una sintassi che specifica innanzitutto la cifra corrispondente all’ammontare, sostanzialmente il numero che dovrà essere sottoposto a formattazione, in secondo luogo sarà possibile definire il simbolo della valuta desiderata (nel nostro caso quello dell’Euro, “€”) passandolo come argomento al filtro:

{{ (ammontare) | currency : "simbolo della divisa" }}

Nel caso in cui il parametro relativo al simbolo non venga specificato a priori, il framework deciderà autonomamente di utilizzare quello di default, cioè è il simbolo del dollaro statunitense (“$”). Come anticipato, lo script proposto di seguito stabilirà l’ammontare sulla base della classica moltiplicazione tra quantità e prezzo, motivo per il quale questi due argomenti verranno passati come scope all’applicazione tramite la direttiva ng-model che si occuperà del binding dei parametri inviati tramite i campi di input:

<script>
var tot = angular.module('formattaPrezzo', []);
tot.controller('totCtrl', function($scope) {
    $scope.qta = 1;
    $scope.prezzo = 5.99;
});
</script>

Come nostro solito, per comodità del lettore riportiamo il codice completo della pagina HTML comprendente l’applicazione basata su AngularJS, i campi di input (in questo caso associati all’input type number di HTML5) e l’elemento destinato alla visualizzazione dell’output, una divbox.

<!DOCTYPE html>
<html>
<head>
<title>Inserimento dati in tabella con AngularJS</title>
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</head>
<body>
<div ng-app="formattaPrezzo" ng-controller="totCtrl">
Quantità: <input type="number" ng-model="qta">
Prezzo: <input type="number" ng-model="prezzo">
Prezzo totale = {{ (qta * prezzo) | currency : "€" }}
</div>
<script>
var tot = angular.module('formattaPrezzo', []);
tot.controller('totCtrl', function($scope) {
    $scope.qta = 1;
    $scope.prezzo = 5.99;
});
</script>
</body>
</html>

Uno dei vantaggi derivanti da questo tipo di approccio risiede nel fatto che lo sviluppatore potrà associare dei valori predefiniti agli scope che verranno poi utilizzati in fase di esecuzione dei calcoli.

Post correlati
I più letti del mese
Tematiche