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
2
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
