How To Calculate Shopping Cart Value In Angular

Introduction

In this blog, we will learn how to calculate shopping cart value in a simple way using AngularJS.

Step-1

Open the code editor of your choice (I used Visual Studio). Create a new project or file and give it a name.

Step-2

Add the script and style link to the head section of your created project or file.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Step-3

Write a simple Angular script for calculation.

var app = angular
.module("myModule", [])
.controller("myController", function ($scope) {
$scope.invoice = {
items: [{
qty: 5,
description: 'Product-1',
cost: 120
}]
};
$scope.addItem = function () {
$scope.invoice.items.push({
qty: 1,
description: '',
cost: 0
});
},
$scope.removeItem = function (index) {
$scope.invoice.items.splice(index, 1);
},
$scope.total = function () {
var total = 0;
angular.forEach($scope.invoice.items, function (item) {
total += item.qty * item.cost;
})
return total;
}
});

Step-4

Design an HTML page.

<body ng-controller="myController">
<div class="container py-3">
<h4 class="text-center text-uppercase">How to calculate Shopping Card in Angular js</h4>
<table class="table table-bordered">
<thead class="bg-danger text-white text-upparcase">
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng:repeat="item in invoice.items">
<td>
<input type="text" ng:model="item.description" class="form-control">
</td>
<td>
<input type="number" min="1" ng:model="item.qty" ng:required class="form-control">
</td>
<td>
<input type="number" min="1" ng:model="item.cost" ng:required class="form-control">
</td>
<td>{{item.qty * item.cost | currency:'₹'}}</td>
<td>
<a href ng:click="removeItem($index)" class="btn btn-sm btn-danger"><i class="fa fa-trash"></i></a>
</td>
</tr>
<tr>
<td><a href ng:click="addItem()" class="btn btn-sm btn-primary rounded-0">Add Product</a></td>
<td></td>
<td>Total:</td>
<td>{{total() | currency:'₹'}}</td>
</tr>
</tbody>
</table>
</div>
</body>

Complete code

<!DOCTYPE html>
<html ng-app="myModule">
<head>
<title>Shopping Card</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
var app = angular
.module("myModule", [])
.controller("myController", function ($scope) {
$scope.invoice = {
items: [{
qty: 5,
description: 'Product-1',
cost: 120
}]
};
$scope.addItem = function () {
$scope.invoice.items.push({
qty: 1,
description: '',
cost: 0
});
},
$scope.removeItem = function (index) {
$scope.invoice.items.splice(index, 1);
},
$scope.total = function () {
var total = 0;
angular.forEach($scope.invoice.items, function (item) {
total += item.qty * item.cost;
})
return total;
}
});
</script>
</head>
<body ng-controller="myController">
<div class="container py-3">
<h4 class="text-center text-uppercase">How to calculate Shopping Card in Angular js</h4>
<table class="table table-bordered">
<thead class="bg-danger text-white text-upparcase">
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng:repeat="item in invoice.items">
<td>
<input type="text" ng:model="item.description" class="form-control">
</td>
<td>
<input type="number" min="1" ng:model="item.qty" ng:required class="form-control">
</td>
<td>
<input type="number" min="1" ng:model="item.cost" ng:required class="form-control">
</td>
<td>{{item.qty * item.cost | currency:'₹'}}</td>
<td>
<a href ng:click="removeItem($index)" class="btn btn-sm btn-danger"><i class="fa fa-trash"></i></a>
</td>
</tr>
<tr>
<td><a href ng:click="addItem()" class="btn btn-sm btn-primary rounded-0">Add Product</a></td>
<td></td>
<td>Total:</td>
<td>{{total() | currency:'₹'}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Step-5

Run your file or project on the browser.

Final output