Calculate Running Total in HTML Table using AngularJS in ASP.Net

Last Reply one month ago By dharmendr

Posted one month ago

I have two inputs one is a textbox input and the other is a api data retrieved from the database. The api data might be varying.

For Eg : 510, 1020, 650 etc

If user enters a number in the textbox. The calculation must go like this :

1 * 510 = 510

2 * 510 = 1020

1 * 1020 = 2040 etc

The output must be displayed in an other textbox

$http.get(apiUrl + "/api/Warehouse/GetDetails?invoiceno=" + $scope.selectedInvoice.originalObject.InvoiceNo + "")
.then(function (response) {
    $scope.mydata = JSON.parse(;          
    //for (i = 0; i <= mydata[i].length; i++) {
        $scope.num = null;
        $scope.mul = null;
        $scope.nums = $scope.mydata[0].PalletCapacity;
        $scope.calc = function () {
            $scope.mul = parseFloat($scope.num) * parseFloat($scope.nums);

I tried something, but couldn't get it

Posted one month ago

Hi skp,

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

I have used web method to populate the record. You have to use Web API for this.


For this example I have used of Northwind database that you can download using the link given below.

Download Northwind Database


<script type="text/javascript" src=""></script>
<script type="text/javascript">
    var app = angular.module('MyApp', []);
    app.controller('MyController', function ($scope, $http) {
        $scope.Products = [];
        $"Default.aspx/GetProducts", { headers: { 'Content-Type': 'application/json'} })
        .then(function (response) {
            $scope.Products = JSON.parse(;
        $scope.Calculate = function (index) {
            $scope.Products[index].Total = parseFloat($scope.Products[index].Price) * parseFloat($scope.Products[index].Quantity);
<div ng-app="MyApp" ng-controller="MyController">
            <tr ng-repeat="product in Products">
                <td>{{ product.Id }}</td>
                <td>{{ product.Name }}</td>
                <td>{{ product.Price }}</td>
                <td><input type="number" min="0" ng-model="product.Quantity" ng-init="product.Quantity=0" ng-change="Calculate($index)" /></td>
                <td><input type="number" ng-model="product.Total" ng-init="product.Total=0" /></td>



using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Web.Script.Serialization;
using System.Web.Services;


Imports System.Collections.Generic
Imports System.Configuration
Imports System.Data.SqlClient
Imports System.Web.Script.Serialization
Imports System.Web.Services



public static string GetProducts()
    List<object> products = new List<object>();
    string sql = "SELECT TOP 5 ProductID,ProductName,UnitPrice FROM products";
    using (SqlConnection conn = new SqlConnection())
        conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlCommand cmd = new SqlCommand(sql))
            cmd.Connection = conn;
            using (SqlDataReader sdr = cmd.ExecuteReader())
                while (sdr.Read())
                        Id = sdr["ProductID"],
                        Name = sdr["ProductName"],
                        Price = sdr["UnitPrice"]
        return (new JavaScriptSerializer().Serialize(products));


Public Shared Function GetProducts() As String
    Dim products As List(Of Object) = New List(Of Object)()
    Dim sql As String = "SELECT TOP 5 ProductID,ProductName,UnitPrice FROM products"
    Using conn As SqlConnection = New SqlConnection()
        conn.ConnectionString = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Using cmd As SqlCommand = New SqlCommand(sql)
            cmd.Connection = conn
            Using sdr As SqlDataReader = cmd.ExecuteReader()
                While sdr.Read()
                    products.Add(New With {
                    .Id = sdr("ProductID"),
                    .Name = sdr("ProductName"),
                    .Price = sdr("UnitPrice")
                End While
            End Using
        End Using

        Return (New JavaScriptSerializer().Serialize(products))
    End Using
End Function