I have 3 fields in a form PriceQuantity and Totali need to get Total based upon Price and QuantityTotalPrice QuantityCould you please help me ltDOCTYPE html PUBLIC 34W3CDTD XHTML 10 TransitionalEN34 34httpwwww3orgTRxhtml1DTDxhtml1transitionaldtd34gtlthtmlgtltheadgt lttitlegtlttitlegtltheadgtltbodygt ltscript type34textjavascript34 src34ajaxgoogleapiscomajaxlibsangularjs139angularminjs34gtlt

Hi mahesh213Check this example Now please take its reference and correct your codeHTMLlthtml xmlns34httpwwww3org1999xhtml34gtltheadgt lttitlegtlttitlegt ltscript type34textjavascript34 src34httpscdnjscloudflarecomajaxlibsangularjs155angularjs34gtltscriptgt ltscript type34textjavascript34gt var app angularmodule39MyApp39 appcontroller39MyController39 function scope window scopeItems Price 100 Price 150 scopeCalculate function quantity index scopeItemsindexTotal parseIntscopeItemsindexPrice parseIntquantity ltscriptgtltheadgtltbodygt ltdiv ngapp34MyApp34 ngcontroller34MyController34gt lttable border34134 cellpadding34034 cellspacing34034gt lttrgt

Calculate Running Total in HTML Table using AngularJS

mahesh21...

SOLVED CLOSED ACTIVE ANSWERED
User: mahesh213
Posted: on Nov 05, 2019 12:23 AM
Forum: AngularJS
Answer: 1
Views: 3388
Sample Code: Download

I have 3 fields in a form Price,Quantity and Total

i need to get Total based upon Price and Quantity

Total:Price * Quantity

Could you please help me

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
</head>
<body>
    <script type="text/javascript" src="//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, $window) {
            $scope.Customers =[{  Price:1}];
        });
    </script>
    <div ng-app="MyApp" ng-controller="MyController">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th>Price</th>
                <th>Quantity</th>
                <th>Total</th>
            </tr>
            <tbody ng-repeat="m in Customers">
                <tr>
                    <td><input type="text" ng-model="m.Price"  /></td>
                    <td><input type="text" ng-model="m.Quantity" /></td>
                    <td><input type="text" ng-model="m.Total" /></td>
                </tr>
            </tbody>        
        </table>
    </div>
</body>
</html>

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

dharmend...

0 2

Reply
ANSWER
User: dharmendr
Replied: on Nov 05, 2019 04:16 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>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $window) {
            $scope.Items = [{ Price: 100 }, { Price: 150}];
            $scope.Calculate = function (quantity, index) {
                $scope.Items[index].Total = parseInt($scope.Items[index].Price) * parseInt(quantity);
            }
        });
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyController">
        <table border="1" cellpadding="0" cellspacing="0">
            <tr>
                <th>Price</th>
                <th>Quantity</th>
                <th>Total</th>
            </tr>
            <tbody ng-repeat="m in Items">
                <tr>
                    <td><input type="text" ng-model="m.Price" readonly="readonly" /></td>
                    <td><input type="text" ng-model="m.Quantity" ng-keyup="Calculate(m.Quantity,$index)" /></td>
                    <td><input type="text" ng-model="m.Total" readonly="readonly" /></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Demo

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

Calculate Running Total in HTML Table using AngularJS

Company

Explore

Follow us

Contact Us