Like Us Like Us Facebook Subscribe Subscribe us YouTube Whatsapp Share us Whatsapp Query Send your queries

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>

5 1 vote
Article Rating
Subscribe
Notify of
guest

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

0 Comments
Inline Feedbacks
View all comments