Angular can help you easily convert numbers into a money format

Question

Angular can help you easily convert numbers into a money format

I need assistance in converting a number to Indian currency format.

Currently, I have attempted the following: http://plnkr.co/edit/lVJGXyuX0BMvB9QUL5zS?p=preview

function formatMoney(credits) {

    console.log(credits+'credits');
    var lastThree = credits.substring(credits.length-3);
    // var lastThree = credits.slice(-2);
    var otherNumbers = credits.substring(0,credits.length-3);
    console.log(otherNumbers+'otherNumbers');
    if(otherNumbers !== '')
        lastThree = ',' + lastThree;
    var res = otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ",") + lastThree;
    return res;
  }

function formatNumber(num) {
    var n1, n2;
    num = (Math.round(num * 100) / 100) + '' || '';
    n1 = num.split('.');
    n2 = n1[1] || null;
    n1 = n1[0].replace(/(\d)(?=(\d\d)+\d$)/g, ",");
    num = n2 ? n1 + '.' + n2 : n1;
    return num;
  }

I am specifically looking to format the number as Indian currency.

For example:

The result obtained with the function formatMoney() is: 1,0,0,000

The result obtained with the function formatNumber() is: 1,000 but on adding a 0, it becomes NaN0

I would appreciate any guidance on where I might be going wrong in my approach.

javascript angularjs

Answer 1

Answer №1

AngularJS provides filters for performing these types of tasks, such as the currency filter:

I have revised your code by removing the formatting functions and replacing them with the currency filter along with the Rupee symbol for Indian currency. Hopefully, this resolves your issue.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  
  $scope.change=function($event, money){
      $scope.money = qwerty;
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7819161f0d14190a56120b3849564a5600">[email protected]</a>" src="https://code.angularjs.org/1.2.20/angular.js" data-semver="1.2.20"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <input  ng-keypress="change($event, money)" type="text" ng-model='money' >
    <pre>{{money | currency : "&#8377;" }}</pre>
  </body>

</html>

Answer 2

AngularJS provides filters for performing these types of tasks, such as the currency filter:

I have revised your code by removing the formatting functions and replacing them with the currency filter along with the Rupee symbol for Indian currency. Hopefully, this resolves your issue.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  
  $scope.change=function($event, money){
      $scope.money = qwerty;
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7819161f0d14190a56120b3849564a5600">[email protected]</a>" src="https://code.angularjs.org/1.2.20/angular.js" data-semver="1.2.20"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <input  ng-keypress="change($event, money)" type="text" ng-model='money' >
    <pre>{{money | currency : "&#8377;" }}</pre>
  </body>

</html>

Answer 3

Answer №2

Angular is not necessary for this task because there is a core JavaScript API called Intl that can be used.

var number = 2453413.70;

console.log(new Intl.NumberFormat('en-IN', { style: "currency", currency: "INR" }).format(number));

If you prefer not to display the currency symbol, you can do it like this:

console.log(new Intl.NumberFormat('en-IN').format(number));

Answer 4

Angular is not necessary for this task because there is a core JavaScript API called Intl that can be used.

var number = 2453413.70;

console.log(new Intl.NumberFormat('en-IN', { style: "currency", currency: "INR" }).format(number));

If you prefer not to display the currency symbol, you can do it like this:

console.log(new Intl.NumberFormat('en-IN').format(number));

Answer 5

Answer №3

Utilize the $filter service directly within your controller or view.

var myApp = angular.module('myApp', []);
myApp.controller('CalcCtrl', function ($scope, $filter) {
    $scope.num = 122212111221121212;
    $scope.filtered = $filter('currency')($scope.num);
    alert($scope.filtered)
});

Remember, the $filter service can be easily extended as well.

myApp.filter('customCurrency', function() { 

    return function(input, symbol, place) {

    // Ensure that we are working with a number
    if(isNaN(input)) {
      return input;
    } else {

      // Check if optional parameters are passed, if not, use the defaults
      var symbol = symbol || 'EUROS';
      var place = place === undefined ? true : place;

      // Perform the operation to set the symbol in the right location
      if( place === true) {
        return symbol + input;
      } else {
        return input + symbol;
      }

    }
  }

});

myApp.controller('CalcCtrl', function ($scope, $filter) {
    $scope.num = 122212111221121212;
    $scope.filtered = $filter('customCurrency')($scope.num);
});

View Demo

Answer 6

Utilize the $filter service directly within your controller or view.

var myApp = angular.module('myApp', []);
myApp.controller('CalcCtrl', function ($scope, $filter) {
    $scope.num = 122212111221121212;
    $scope.filtered = $filter('currency')($scope.num);
    alert($scope.filtered)
});

Remember, the $filter service can be easily extended as well.

myApp.filter('customCurrency', function() { 

    return function(input, symbol, place) {

    // Ensure that we are working with a number
    if(isNaN(input)) {
      return input;
    } else {

      // Check if optional parameters are passed, if not, use the defaults
      var symbol = symbol || 'EUROS';
      var place = place === undefined ? true : place;

      // Perform the operation to set the symbol in the right location
      if( place === true) {
        return symbol + input;
      } else {
        return input + symbol;
      }

    }
  }

});

myApp.controller('CalcCtrl', function ($scope, $filter) {
    $scope.num = 122212111221121212;
    $scope.filtered = $filter('customCurrency')($scope.num);
});

View Demo

Angular can help you easily convert numbers into a money format

Answer №1

Answer №2

Answer №3

Similar questions

Using static methods within a static class to achieve method overloading in Typescript

Looking for a way to sort through data using the current time as a filter

When the window is fully loaded, JavaScript executes

What is the process for retrieving User Information using AngularJS following NodeJS authentication?

Error in ReactJs production code: ReferenceError - the process is undefined

Creating a series of text messages for Push Notifications using FCM in conjunction with Ionic 1. Multiple lines of

Issue: ngModel: Unassignable Value

Utilizing JSON data to generate an HTML webpage showcasing a collection of community districts through the power of JavaScript

In order to verify the dynamic components within the table

Instructions for activating column resizing in MUI DataGrid

Once an ng-repeat is completed, I must extract and retrieve the 'id' of a specific element

Unable to delete a row from a dynamically generated table using jQuery

Is your custom login form in Web2py not submitting properly?

What are the best practices for incorporating React state into a dynamic filter component?

Tips for regularly retrieving information from a psql table

A loop that iterates through only the initial element of an array

The inline style in Angular 2 is not functioning as expected when set dynamically

Encountering issues while running the npm build command due to exporting async functions in React

The EJS template on the Express app is encountering an issue: it is unable to find the view "/id" within the views directory located at "/home/USER/Desktop/scholarship-app/views"

Using JWPlayer 6 and JWPlayer 7 simultaneously in one project - how is it done?