AngularJS中实现列值求和及金额转英文大写的技术问询

刚好帮你搞定这两个需求，咱们分两步来实现：先算出三个乘积的总和，再把总金额转成标准的英文大写形式。下面是完整的可运行方案：

完整代码示例 #

HTML部分 #

<!DOCTYPE html>
<html ng-app="cashApp">
<head>
    <title>Cash Calculation</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="CashController">
    <table>
        <tr>
            <th colspan="3">Details of Cash</th>
        </tr>
        <tr>
            <td>Cash Notes</td>
            <td>Amount in Rs.</td>
        </tr>
        <tr>
            <td><input type="text" ng-model="amount" ng-change="calculateTotal()">X 2000</td>
            <td>{{ (+amount) * 2000 || 0 }}</td>
        </tr>
        <tr>
            <td><input type="text" ng-model="amount3" ng-change="calculateTotal()">X 100</td>
            <td>{{ (+amount3) * 100 || 0 }}</td>
        </tr>
        <tr>
            <td><input type="text" ng-model="amount4" ng-change="calculateTotal()">X 50</td>
            <td>{{ (+amount4) * 50 || 0 }}</td>
        </tr>
        <tr>
            <td>Total</td>
            <td>{{total || 0}}</td>
        </tr>
        <tr>
            <td>Total in Words</td>
            <td>{{total | numberToWords}}</td>
        </tr>
    </table>
</body>
</html>

JavaScript部分 #

angular.module('cashApp', [])
.controller('CashController', function($scope) {
    // 初始化输入变量，避免undefined问题
    $scope.amount = '';
    $scope.amount3 = '';
    $scope.amount4 = '';
    $scope.total = 0;

    // 实时计算总和的方法
    $scope.calculateTotal = function() {
        // 把输入转成数字，非数字/空值默认按0处理
        const val1 = isNaN(+$scope.amount) ? 0 : +$scope.amount;
        const val2 = isNaN(+$scope.amount3) ? 0 : +$scope.amount3;
        const val3 = isNaN(+$scope.amount4) ? 0 : +$scope.amount4;

        $scope.total = (val1 * 2000) + (val2 * 100) + (val3 * 50);
    };
})
.filter('numberToWords', function() {
    return function(number) {
        if (isNaN(number) || number < 0) return '';
        if (number === 0) return 'Zero';

        // 定义基础数字对应的英文单词
        const ones = ['', 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine',
                     'Ten', 'Eleven', 'Twelve', 'Thirteen', 'Fourteen', 'Fifteen', 'Sixteen',
                     'Seventeen', 'Eighteen', 'Nineteen'];
        const tens = ['', '', 'Twenty', 'Thirty', 'Forty', 'Fifty', 'Sixty', 'Seventy', 'Eighty', 'Ninety'];
        const scales = ['', 'Thousand', 'Million', 'Billion'];

        // 处理每三位数字的逻辑
        function convertChunk(num) {
            let chunkStr = '';

            // 处理百位
            if (Math.floor(num / 100) > 0) {
                chunkStr += ones[Math.floor(num / 100)] + ' Hundred ';
                num %= 100;
            }

            // 处理十位和个位
            if (num > 0) {
                if (num < 20) {
                    chunkStr += ones[num];
                } else {
                    chunkStr += tens[Math.floor(num / 10)];
                    if (num % 10 > 0) {
                        chunkStr += ' ' + ones[num % 10];
                    }
                }
            }

            return chunkStr.trim();
        }

        let words = '';
        let scaleIndex = 0;

        // 分块处理数字（每三位一组）
        while (number > 0) {
            const chunk = number % 1000;
            if (chunk > 0) {
                const chunkWords = convertChunk(chunk);
                words = chunkWords + (scaleIndex > 0 ? ' ' + scales[scaleIndex] : '') + ' ' + words;
            }
            number = Math.floor(number / 1000);
            scaleIndex++;
        }

        return words.trim();
    };
});

关键细节说明 #

1. 总和计算逻辑 #

• 给页面绑定了控制器CashController，把数据和逻辑集中管理，更符合AngularJS的设计思路。
• 用ng-change监听输入框的变化，每次输入修改都会自动重新计算总和，不用手动触发。
• 加入了非数字判断，就算输入空值或者乱码，也不会导致计算出错，会默认按0处理。

2. 英文大写转换逻辑 #

• 写了一个自定义过滤器numberToWords，专门做数字到英文单词的转换，复用性很强。
• 内部按三位数字分块处理，结合百位、十位、个位的单词，再加上千、百万等单位，拼接成标准的金额英文表达。
• 支持从0到数十亿的数字转换，覆盖日常金额场景完全够用。

测试效果 #

当你在第一行输入2，第二行输入3，第三行输入4时：

• 三个乘积分别显示4000、300、200
• 总和栏显示4500
• 英文大写栏显示Four Thousand Five Hundred

内容的提问来源于stack exchange，提问作者sathish kumar