Caculate Column (Grand) Total in AngularJS

mahesh213
 
on Feb 19, 2020 11:46 PM
Sample_108312.zip
1121 Views

Hi,

I have 2 fields Product and Amount

I am filling product value from database

amount field is typable

currently my requirement is that at the time of fiiling only display total value

currently issue in my code is that if i have filled all rows then only it was displaying total value

@{ 
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>Product</th>
                <th>Amount</th>                
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="employee in employees">
                <td>{{ employee.Product }}</td>
                <td><input type="text" ng-model="employee.Amount" /></td>
            </tr>
            <tr>
                <td><b>Total</b></td>
               
                <td><b>{{ total() }}</b></td>
            </tr>
        </tbody>
    </table>
    <script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope, $http) {
    GetEmployees();
    function GetEmployees() {
        $scope.employees = [];
        $http({
            method: 'Get',
            url: '/kendogrid/GetCategories'
        }).then(function (response) {
            $scope.employees = response.data;
        }), function (error) {
            $scope.message = 'Unexpected Error';
        };
    }

    //ImpFee total 
    $scope.total = function () {
        var total = 0;
        for (var i = 0; i < $scope.employees.length; i++) {
            total += parseFloat($scope.employees[i].Amount);
        }
        return total;
    }
});
    </script>
</body>
</html>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Feb 20, 2020 12:23 AM
on Feb 20, 2020 12:24 AM

Hi mahesh213,

Check the below code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function ($scope, $http) {
            GetEmployees();
            function GetEmployees() {
                $scope.employees = [{ Product: 'Category 1' }, { Product: 'Category 2' }, { Product: 'Category 3'}];
            }
            $scope.total = function () {
                var total = 0;
                for (var i = 0; i < $scope.employees.length; i++) {
                    total += isNaN($scope.employees[i].Amount) ? 0 : parseFloat($scope.employees[i].Amount);
                }
                return total;
            }
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>Product</th>
                <th>Amount</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="employee in employees">
                <td>{{ employee.Product }}</td>
                <td><input type="text" ng-model="employee.Amount" /></td>
            </tr>
            <tr>
                <td><b>Total</b></td>
                <td><b>{{ total() }}</b></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Demo