Question

在附加的代码片段中，我想使用AngularJS计算所有行的净金额总和。

我们将非常感谢您在这方面的快速帮助。

<html ng-app="MyApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Add Rows</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">    
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script>
    angular.module('MyApp', [])
        .controller('MainController', ['$scope', '$http',
            function ($scope, $http) {
                $scope.rows = ['Row 1'];
                $scope.counter = 3;


                $scope.calculateTableSum = function (dQuantityIssued, dUnitPrice)
                {
                    $scope.GrossTotal = dQuantityIssued * dUnitPrice;
                }

                //Adding Row
                $scope.addRow = function () {
                    $scope.rows.push('Row ' + $scope.counter);
                    $scope.counter++;

                }

                //Removing Row
                $scope.removeRow = function (rowIndex) {
                    $scope.rows.splice(rowIndex, 1);
                }

            } ]);

</script>

<a href="#" class="button" ng-click="addRow()">Add Row {{counter}}</a>
<table border="1">
    <thead>
        <tr>
            <th>
                &nbsp;
            </th>
            <th>
                Product
            </th>
            <th>
                Description
            </th>
            <th>
                Qty Issued
            </th>
            <th>
                Unit Price
            </th>
            <th>
                Gross Total
            </th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="(rowIndex,rowContent) in rows">
            <td>
                <input type="button" value="Remove" class="btn btn-primary" ng-click="removeRow(rowIndex)" />
            </td>                
            <td>
                <input type="text"></input>
            </td>
            <td>
                <input type="text"></input>
            </td>
            <td>
                <input ng-model="QtyIssued" type="number"/>
            </td>
            <td>
                <input ng-model="UnitPrice" type="number" ng-change="calculateTableSum(QtyIssued,UnitPrice)" />
            </td>
            <td>
                <input ng-model="GrossTotal" type="number" ng-bind="QtyIssued*UnitPrice" />
            </td>

        </tr>
    </tbody>
    <tfoot>

    </tfoot>
</table>
<p>
    Net Amount Total = {{NetAmount}}
</p>

Answer 1

请仔细阅读：

<table ng-controller="SubTotalCtrl">
    <thead>
        <tr><th ng-repeat="(key, th) in head">{{th}}</th></tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in body">
            <td><input ng-model="row.a"></input></td>
            <td><input ng-model="row.b"></input></td>
            <td><input ng-model="row.c"></input></td>
        </tr>
    </tbody>
    <tfoot>
        <tr ng-repeat="(perc, sum) in grouppedByPercentage()">
            <td></td>
            <td><span>Subtotal for {{perc}}%</span></td>      
            <td>{{sum * perc / 100.0}}</td>
         </tr>
    </tfoot>
</table>


angular
.module('myApp', [])
.controller('SubTotalCtrl', function ($scope) {
    // data
    $scope.head = {
        a: "Amount",
        b: "Percent",
        c: "Percent"
    };
    $scope.body = [{
        a: "1000",
        b: "5",
        c: "10"
    }, {
        a: "2000",
        b: "0",
        c: "5"
    }, {
        a: "3000",
        b: "10",
        c: "20"
    }];

    $scope.grouppedByPercentage = function () {
        var groups = {};
        $scope.body.forEach(function (row) {
            ['b', 'c'].forEach(function (key) {
                var perc = row[key];
                if (perc === '0') { return; }   // ignore 0 percentage

                if (!groups[perc]) {
                    groups[perc] = 0;
                }
                groups[perc] += parseInt(row.a);
                // use `parseFloat()` if you want decimal points
            });
        });
        return groups;
    };
});

http://jsfiddle.net/ExpertSystem/LD7QS/1/

它将回答您的所有问题。

如何使用AngularJS从动态创建的HTML表中计算html表列的总和？

1 个答案: