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>
