【问题标题】:Format number to money format in angular以角度格式将数字格式转换为货币格式
【发布时间】:2025-11-25 23:20:08
【问题描述】:

我想将数字转换为数字格式。

到目前为止我已经尝试过了: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;
  }

我想将数字转换为印度货币。

例子:

1,000
10,000
1,00,000
10,00,000

我使用函数 formatMoney() 得到的输出:1,0,0,000

我使用函数 formatNumber(): 1,000 得到的输出,按 0 后,它变为 NaN0

我在这里做错了什么?

【问题讨论】:

  • 这已经有了答案。 *.com/questions/16037165/… 如果这不起作用,我很乐意试一试。
  • @Conceptz:我尝试了相同的代码,但对我不起作用。我在这里做错了什么?
  • Emile Paffard-Wray 写了一个很好的答案,请参阅我的评论以了解您需要的调整,如果可行,请为他的答案投票。

标签: javascript angularjs


【解决方案1】:

AngularJS 提供者过滤器用于做这些事情,有一个currency filter 可用:

我已经重写了你的代码,删除了格式化函数,并用货币过滤器加上印度货币的卢比符号替换了你的代码,希望这能解决你的问题。

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="angular.js@1.2.x" 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>

【讨论】:

  • 我想自己格式化输入框中的数字,而不是在 HTML 中显示。
  • {{钱 |货币:“₹” }}
  • 我不需要卢比符号。我只需要格式化数字。就像您在之前的 cmets 中提供的链接一样。
  • 如果您不需要卢比符号,只需将过滤器的第二部分替换为空字符串,即{{ money | currency: '' }}。假设您想要印度货币的符号是我的错误。
  • 格式化输入框中的钱是一个不同的问题。
【解决方案2】:

您不需要 Angular 来执行此操作,因为核心 Javascript Intl 中有一个 api。

var number = 2453413.70;

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

如果你不想要货币符号,像这样使用它

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

【讨论】:

    【解决方案3】:

    您可以将$filter 服务直接注入并使用到您的控制器甚至您的视图中

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

    请记住,$filter 服务也很容易扩展。

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

    Demo

    【讨论】:

    • @phantophoenix Angular 使用服务将常用功能注入到控制器或视图中。您的函数方法编码良好,但由于范围限制,仍不能在控制器外部使用。
    • 我不想在这个控制器之外使用它。我想知道这段代码有什么问题。