Hii have one filed in paytypes arrayi need to display sum of that fiels values on below of row ltdiv class34tableresponsive 34 scrollbookmark34bookmark234gt lttable id34tblOrders34 cellpadding341234 class34table tablebordered tablehover tablestriped34 style34marginleft 20px marginright 20px34gt lttr class34success34gt ltthgtPayType

Hi mahesh213Check this example Now please take its reference and correct your codeHTMLlthtml xmlns34httpwwww3org1999xhtml34gtltheadgt lttitlegtlttitlegtltheadgtltbodygt ltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsangularjs139angularminjs34gtltscriptgt ltscript type34textjavascript34gt var app angularmodule39MyApp39 appcontroller39MyController39 function scope scopepaytypes PDIName 34DA34 amount 50 PTIName 34Allowance34 PDIName 34SA34 amount 20 PTIName 34Allowance34 PDIName 34PA34 amount 30 PTIName 34Allowance34 PDIName 34HRA34 amount 10 PTIName 34Allowance34 PDIName 34PF34 amount 80 PTIName 34Deduction34 PDIName 34

Display Column Sum in HTML Table Footer in AngularJS

mahesh21...

SOLVED CLOSED ACTIVE ANSWERED
User: mahesh213
Posted: on Jul 02, 2019 11:48 PM
Forum: AngularJS
Answer: 1
Views: 16205
Sample Code: Download

Hi,

i have one filed in paytypes array

i need to display sum of that fiels values on below of row

            <div class="table-responsive " scroll-bookmark="bookmark2">
                <table id="tblOrders" cellpadding="12" class="table table-bordered table-hover table-striped"
                       style="margin-left: 20px; margin-right: 20px;">
                    <tr class="success">
                        <th>PayType</th>
                        <th>Is %</th>
                    </tr>
                    <tbody ng-repeat="detail in paytypes">
                        <tr ng-if="detail.PTI_Name=='Allowance'">
                            <td><input type="text" ng-model="detail.PDI_Name" /></td>
                            <td><input type="text" ng-model="detail.amount" /></td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td>Total : </td>
                            <td>
                                <input type="text" value="total()" ng-model="total()" class="form-control input-sm" readonly />
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>

//total 
$scope.total = function () {
    var total = 0;
    angular.forEach($scope.paytypes, function (detail) {
        total += detail.amount;
    })
    return total;
}

Total value is not displaying properly

could you please check it and help me

Download FREE API for Word, Excel and PDF in ASP.Net

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Jul 03, 2019 06:13 AM
Modified: on Jul 03, 2019 07:03 AM
Report

Hi mahesh213,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope) {
            $scope.paytypes = [
            { PDI_Name: "DA", amount: 50, PTI_Name: "Allowance" },
            { PDI_Name: "SA", amount: 20, PTI_Name: "Allowance" },
            { PDI_Name: "PA", amount: 30, PTI_Name: "Allowance" },
            { PDI_Name: "HRA", amount: 10, PTI_Name: "Allowance" },
            { PDI_Name: "PF", amount: 80, PTI_Name: "Deduction" },
            { PDI_Name: "ESIC", amount: 90, PTI_Name: "Deduction" }
            ];
            $scope.total = function () {
                var total = 0;
                angular.forEach($scope.paytypes, function (detail) {
                    if (detail.PTI_Name.toLowerCase() == 'allowance') {
                        total += parseFloat(detail.amount == "" ? 0 : detail.amount);
                    }
                })
                return total;
            }
        });        
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <div class="table-responsive " scroll-bookmark="bookmark2">
            <table id="tblOrders" cellpadding="12" class="table table-bordered table-hover table-striped"
                style="margin-left: 20px; margin-right: 20px;">
                <tr class="success">
                    <th>PayType</th>
                    <th>Is %</th>
                </tr>
                <tbody ng-repeat="detail in paytypes">
                    <tr ng-if="detail.PTI_Name=='Allowance'">
                        <td><input type="text" ng-model="detail.PDI_Name" /></td>
                        <td><input type="text" ng-model="detail.amount" /></td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td>Total :</td>
                        <td><input type="text" value="total()" ng-model="total()" class="form-control input-sm" readonly /></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</body>
</html>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Display Column Sum in HTML Table Footer in AngularJS

Company

Explore

Follow us

Contact Us