Angularjs Format Currency
Total Page:16
File Type:pdf, Size:1020Kb
Price "> Continue Angularjs format currency Display the number as a currency format: Price = {{ price | currency }} Try it Yourself » The currency filter formats a number to a currency format. By default, the locale currency format is used. Syntax {{ number | currency : symbol : fractionsize }} Parameter Values Value Description symbol Optional. The currency symbol to be displayed. The symbol can be any character or text. fractionsize Optional. The number of decimals. More Examples Display the price in the Norwegian currency format: Price = {{ price | currency : "NOK" }} Try it Yourself » Display the price with three decimals: Price = {{ price | currency : "NOK" : 3 }} Try it Yourself » Related Pages AngularJS Tutorial: Angular Filters AngularJS Filter currency is used to format a number as a currency, eg $101 The Default Currency Symbol is $, however users can assign locale currency settings as well. Syntax: {{ currency_value | currency : symbol: decimal}} View in Splitscreen» Value in Default Currency ($): {{value| currency}} Value in Japanese Yen: {{value| currency:"¥"}} Value Without Filter - {{value }} Note:It Returns a formatted Number Arguments Param Type Explanation amount number The input value to be filtered symbol string The currency symbol/sign amount number The input value to be filtered Show / Hide Table of Contents There was an error loading this resource. Please try again later. Example - example-filter-reverse-production Actual Model Value: {{amount}} (function(angular) { 'use strict'; angular.module('fooApp', []) .directive('asCurrency', function (currencyFilter) { return { restrict: 'A', require: '?ngModel', link: function (scope, elem, attrs, ctrl) { if (!ctrl) return; var sanitize = function(s) { return s.replace(/[^\d|\-+|\.+]/g, ''); } var convert = function() { var plain = sanitize(ctrl.$viewValue); ctrl.$setViewValue(currencyFilter(plain)); ctrl.$render(); }; elem.on('blur', convert); ctrl.$formatters.push(function (a) { return currencyFilter(a); }); ctrl.$parsers.push(function(a) { return sanitize(a); }); } }; }) .controller('MyController', function($scope) { $scope.amount = '25.00'; }); })(window.angular); This project is module for AngularJS. It provides: A service (factory) that retrieves currency information (name, symbol, fraction and formating) according to ISO 4217 currency codes A filter to print formatted currency (-100 USD -> -$100.00) Installation This library is available with the bower package manager, you can either: Execute the following command: bower install angular-currency-format Add 'currencyFormat' to your angular.module dependency, usually in app.js angular.module('myApp', ['currencyFormat']); Demo Usage Factory In the factory there are two methods that return information about the currencies. // Declare the factory as dependency angular.module('myApp') .controller('MyCtrl', function (currencyFormatService) { // Get the information about the currencies console.log(currencyFormatService.getCurrencies()); // outputs: // { // 'AMD': { // 'name': 'Armenian Dram', // 'fractionSize': 2, // 'symbol': { // 'grapheme': 'դր.', // 'template': '1 $', // 'rtl': false // }, // 'uniqSymbol': { // 'grapheme': 'դր.', // 'template': '1 $', // 'rtl': false // } // }, // ... // } // Get the information about currency by ISO 4217 currency code console.log(currencyFormatService.getByCode('EUR')); // outputs: // { // 'name': 'Euro', // 'fractionSize': 2, // 'symbol': { // 'grapheme': '€', // 'template': '$1', // 'rtl': false // }, // 'uniqSymbol': { // 'grapheme': '€', // 'template': '$1', // 'rtl': false // } // } // Get the information about the delimiters console.log(currencyFormatService.getLanguages()); // outputs: // { // 'ar_AE': { // 'decimal': '.', // 'thousands': ',' // }, // ... // } // Get the information about the delimiters by locale ID console.log(currencyFormatService.getLanguageByCode('en_US')); // outputs: // { // { // 'en_US': { // 'decimal': '.', // 'thousands': ',' // } // } }); Information about currencies is an object which has the structure: { 'AMD': { // ISO 4217 currency code. 'name': 'Armenian Dram', // Currency name. 'fractionSize': 2, // Fraction size, a number of decimal places. 'symbol': { // Currency symbol information. 'grapheme': 'դր.', // Currency symbol. 'template': '1 $', // Template showing where the currency symbol should be located // (before or after amount). 'rtl': false // Writing direction. }, 'uniqSymbol': { // Alternative currency symbol information. We recommend to use it // when you want to exclude a repetition of symbols in different // currencies. 'grapheme': 'դր.', // Alternative currency symbol. 'template': '1 $', // Template showing where the alternative currency symbol should be // located (before or after amount). 'rtl': false // Writing direction. } }, ... } Symbol/uniqSymbol field is null, when the currency has no symbol/alternative symbol. Information about languages is an object which has the structure: { "en_US": { // Locale ID "decimal": ".", // Decimal delimiter "thousands": "," // Thousands delimiter }, ... } Filter Instead of directly using the currency symbol, you only need the 3 char long currency code (e.g. USD or JPY). It will take the right symbol, format and fraction size. The fraction can be set up by providing a number of decimal places after the currency field: // in controller $scope.amount = -1234.56; $scope.isoCode = 'USD'; $rootScope.currencyLanguage = 'en_US'; // Can be set through the parameter of the filter. Default 'en_US'. // in template {{ amount | currencyFormat:isoCode }} // -$1,234.56 {{ amount | currencyFormat:isoCode:0 }} // -$1,235 {{ amount | currencyFormat:'RUR':null:true:'ru_RU' }} // -1 234,56 ₽ If there is no currency symbol, then the filter will return the value in the following format: formated amount + ISO code. For example -1,234.56 USD. Currency reference The component uses the JSON with currencies and languages information from . The list of currency codes was taken from . License The MIT License. See LICENSE Trong bài viết này, bạn sẽ tìm hiểu về Bộ lọc tiền tệ trong AngularJS. AngularJS AngularJS là một khung JavaScript. Ban đầu nó được phát triển bởi Hevery và Adam Abrons. Bây giờ nó được duy trì bởi Google. AngularJS rất nhẹ và dễ học. Nó là hoàn hảo trong các dự án ứng dụng trang đơn. AngularJS là mã nguồn mở, miễn phí và dễ xử lý. Bộ lọc tiền tệ Một trong những bộ lọc trong AngularJS được gọi là Bộ lọc tiền tệ. Đây “tệ” bộ lọc bao gồm “$” Dollar Symbol như mặc định. Vì vậy, chúng ta có thể sử dụng mã sau cho định dạng mẫu HTML của Bộ lọc tiền tệ. {{ currency_expression | currency : symbol : fractionSize}} Mã HTML Mã HTML sau đây có chứa thư mục gốc “ng-app” và điều khiển “ng-điều khiển” . Vì vậy, bạn có thể tạo bất kỳ tên cho nó. Bộ lọc tiền tệ AngularJS chứa biểu tượng Dollar $ USD Dollar làm mặc định. {{ amount | currency }} AngularJS Khi chúng tôi chạy đoạn mã sau, chúng tôi sẽ nhận được kết quả là $ 1000. Vì vậy, bạn có thể thay đổi biểu tượng Dollar Dollar này dựa trên định dạng mẫu HTML của Bộ lọc tiền tệ. var myApp = angular.module('CurrencyApp', []); myApp.controller('CurrencyController', function($scope) { $scope.amount = 1000; }); Bản trình diễn: Xóa biểu tượng mặc định của bộ lọc tiền tệ HTML Trong giá trị mã sau đây = Tối tháng, do đó Biểu tượng mặc định $ $ Dollar Dollar sẽ bị xóa. {{ amount | currency : value="" }} {{ amount | currency : "" }} Bản trình diễn: Danh sách các quốc gia và tiền tệ của họ sử dụng AngularJS HTML Đoạn mã sau chứa ký hiệu tiền tệ cho các quốc gia tương ứng. Countries & Their Currency Using AngularJS Removed default currency($) : {{ amount | currency : "" }} Default currency($) : {{ amount | currency }} Indian Currency: {{amount | currency:"₹"}} US Dollar - USD : {{ amount | currency : "$" }} United Kingdom Pound - GBP : {{amount | currency:"£"}} Thailand Baht - THB : {{amount | currency:"฿"}} China Yuan Renminbi - CNY : {{amount | currency:"¥"}} Costa Rica Colon - CRC : {{amount | currency:"₡"}} Ukraine Hryvnia - UAH : {{amount | currency:"₴"}} AngularJS var myApp = angular.module('CurrencyApp', []); myApp.controller('CurrencyController', function($scope) { $scope.amount = 1000; }); Bản trình diễn: Kích thước phân số trong Bộ lọc tiền tệ AngularJS Chúng tôi có thể sử dụng kích thước phân số trong bộ lọc tiền tệ. Đoạn mã sau chúng tôi đã thêm 3 làm kích thước phân số để kết quả thêm 3 số không. HTML Fraction Size In AngularJS Currency Filter Amount : {{ amount | currency : "$" : 3 }} Bản trình diễn: Tham khảo s Tóm lược Chúng tôi đã học cách sử dụng Bộ lọc tiền tệ trong AngularJS. Tôi hy vọng bài viết này hữu ích cho tất cả những người mới bắt đầu. To format string in number and currency format in AngularJS, we can use number and currency filter respectively. Below code snippet first initialize the members JSON collection using ng-init directive. In the first Un ordered list, notice the highlighted code snippet. We are formatting the Salary field of the data into Number format. The first number format doesn't have any parameter so it simply write the salary field value in number format separated by comma after every 3 characters (USA million format). The second number format passes 4 as parameter (: 4), so it maintains 4 decimal character after each full number. Number format {{member.username | uppercase}} - {{member.address}} - Number -> {{ member.salary | number }} - {{ member.salary | number: 4 }} Currency format {{member.username | uppercase}} - {{member.address}} - {{ member.salary | currency }} - {{ member.salary | currency: "Rs." }} In the second