En este artículo, conoceremos los filtros de moneda en AngularJS , además de comprender su implementación a través de los ejemplos. Los filtros se utilizan para modificar o formatear los datos dados de cierta manera. AngularJS tiene diferentes filtros como mayúsculas, minúsculas, etc. Uno de esos filtros es el filtro de moneda.
El filtro Moneda modifica o formatea un número dado en una moneda. En otros términos, solo estamos tomando un número y mostrándolo en un formato de moneda específico.
Sintaxis de la plantilla HTML:
{{ amount | currency : symbol : fractionSize}}
Sintaxis para JavaScript:
$filter('currency')(amount, symbol, fractionSize)
Parámetros: Acepta 2 parámetros, los cuales se describen a continuación:
- cantidad: La entrada de número necesaria para formatear en moneda.
- símbolo : Es un parámetro opcional donde proporcionamos el símbolo o identificador que queremos mostrar. De forma predeterminada, se establece en el símbolo del dólar.
- fractionSize : redondea el número específico a lugares decimales particulares. Es un parámetro opcional y, de forma predeterminada, se establece en el máximo predeterminado para la configuración regional actual.
Ejemplo: Este ejemplo describe el filtro de moneda sin usar los parámetros opcionales.
HTML
<html>
<head>
<title>Currency Filter</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>
Currency Filter without optional parameters
</h3>
<div ng-app="myApp"
ng-controller="currencyCtrl">
<p>Number: {{curr}}</p>
<p>After applying currency filter: </p>
<p>Price = {{ curr | currency}}</p>
</div>
<script>
var app = angular.module('myApp', []);
var curr = 1000.5555;
app.controller('currencyCtrl', function($scope) {
$scope.curr = curr;
});
</script>
</center>
</body>
</html>
Producción:
Filtro de moneda sin parámetros
Ejemplo: Este ejemplo describe el filtro de moneda con parámetros opcionales.
HTML
<html>
<head>
<title>Currency Filter</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js">
</script>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h3>Currency Filter with optional parameters</h3>
<div ng-app="myApp"
ng-controller="currencyCtrl">
<p>Number: {{curr}}</p>
<p>After applying currency filter: </p>
<p>Price = {{ curr | currency : "₹" :3}}</p>
</div>
<script>
var app = angular.module('myApp', []);
var curr = 1000.5555;
app.controller('currencyCtrl', function($scope) {
$scope.curr = curr;
});
</script>
</center>
</body>
</html>
Producción:
Filtro de moneda con parámetros
Publicación traducida automáticamente
Artículo escrito por pateljkhushbu y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA