AngularJS Dynamic Product Add with Calculation

AngularJS Dynamic Product Add with Calculation

The post will shows how to add product dynamically with calculation using AngularJS. The code given below is created by one of our best student Abhijit Prasad.

Screen shot AngularJS Dynamic Product Add

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular JS Dynamic Product Cart System</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<style>
body{
background-color: #ffea00;
}
#table{
/*border: 1px solid black; */
width: 100%;
}
#total-section tr,td{
background: blue;
color: white
}
h1{
text-align: center;
color: #f30;
}
p{
text-align: center;
font-weight: bold;
color: #f40;
}
.full-width{
width: 100%;
}
#table tr,td{
border:1px solid #333;
text-align:right;
padding:5px;
}
#table tr,th{
text-align:center;
border:1px solid #333;
padding:10px;
background: black;
color: white;
}
#table .left{
text-align:left;
padding:5px;
}
.text-right{
text-align: right;
}
.bm-20{
bottom-margin: 20px;
}
</style>
</head>
<body>
<h1>Angular JS Dynamic Product Cart System</h1>
<p>By Abhijit Prasad (Under guidance of Sanjay Sir (Codentricks))</p>

<div ng-app='myapp' ng-controller='myctrl'>
<form>
<input type="text" ng-model='prodname' placeholder="Product Name">
<input type="text" ng-model='qty' value="1" placeholder="Quantity">
<input type="text" ng-model='rate' value="0" placeholder="Rate">
<input type="text" ng-model='cgst' placeholder="CGST">%
<input type="text" ng-model='sgst' placeholder="SGST">%
<button style="width: 150px" ng-click="addItem()">Add</button><br><br>
<div style="width: 100%">
<table id="table">
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Rate</th>
<th>Total Cost</th>
<th>CGST</th>
<th>SGST</th>
<th>Line Total</th>
<th>Action</th>
</tr>
<tr ng-repeat='item in items'>
<td class="left">{{item.name}}</td>
<td>{{item.qty}}</td>
<td>{{item.rate}}</td>
<td>{{item.totcost}}</td>
<td>{{item.cgst}}</td>
<td>{{item.sgst}}</td>
<td>{{item.linetot}}</td>
<td><button class="full-width" ng-click="removeItem('{{item.index}}')">Remove</button></td>
</tr>
</table><br><br>
<table id='total-section'>
<tr>
<td>Total Amount</td>
<td>{{totalCost()}}</td>
</tr>
<tr>
<td>
<input type="number" ng-model='discount'>
</td>
<td>
- {{discount}}
</td>
</tr>
<tr>
<td>
Grand Total
</td>
<td>{{totalCost() - discount}}</td>
</tr>
</table>
</div>

</form>
</div>
<script>
var app = angular.module('myapp',[]);
app.controller('myctrl', function($scope){
$scope.prodname="Product";
$scope.qty=1;
$scope.rate=1;
$scope.cgst=5;
$scope.sgst=5;
$scope.discount = 0;
$scope.items = [];

$scope.price= "hello";
$scope.subtotal = function(){
return $scope.price = $scope.qty*( $scope.rate*(1 + $scope.cgst*0.01 + $scope.sgst*0.01)) ;
};

$scope.addItem = function (){
var item = {};
item.name = $scope.prodname;
item.qty = $scope.qty;
item.rate = $scope.rate;
item.cgst = $scope.cgst ;
item.sgst = $scope.sgst;
item.totcost = item.qty * item.rate;
item.linetot = item.totcost * (1 + item.cgst*0.01 + item.sgst*0.01);
item.index = $scope.items.length;

$scope.items.push(item);
}
$scope.removeItem = function (index){
$scope.items.splice(parseInt(index),1);
}
$scope.totalCost = function(){
var sum=0;
for (var i = $scope.items.length - 1; i >= 0; i--) {
sum += $scope.items[i].linetot;
}
return sum;
}
});
</script>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Do you have any Query / Suggestion