Post
Ask Question

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.
  1. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
  2. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">  
  3. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>  
  4. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>  
Step-3

Write a simple Angular script for calculation.
  1. var app = angular  
  2.            .module("myModule", [])  
  3.            .controller("myController", function ($scope) {  
  4.                $scope.invoice = {  
  5.                    items: [{  
  6.                        qty: 5,  
  7.                        description: 'Product-1',  
  8.                        cost: 120  
  9.                    }]  
  10.                };  
  11.                $scope.addItem = function () {  
  12.                    $scope.invoice.items.push({  
  13.                        qty: 1,  
  14.                        description: '',  
  15.                        cost: 0  
  16.                    });  
  17.                },  
  18.   
  19.           $scope.removeItem = function (index) {  
  20.               $scope.invoice.items.splice(index, 1);  
  21.           },  
  22.   
  23.           $scope.total = function () {  
  24.               var total = 0;  
  25.               angular.forEach($scope.invoice.items, function (item) {  
  26.                   total += item.qty * item.cost;  
  27.               })  
  28.   
  29.               return total;  
  30.           }  
  31.            });  
Step-4

Design an HTML page.
  1. <body ng-controller="myController">  
  2.     <div class="container py-3">  
  3.         <h4 class="text-center text-uppercase">How to calculate Shopping Card in Angular js</h4>  
  4.         <table class="table table-bordered">  
  5.             <thead class="bg-danger text-white text-upparcase">  
  6.                 <tr>  
  7.                     <th>Product</th>  
  8.                     <th>Quantity</th>  
  9.                     <th>Price</th>  
  10.                     <th>Total</th>  
  11.                     <th></th>  
  12.                 </tr>  
  13.             </thead>  
  14.             <tbody>  
  15.                 <tr ng:repeat="item in invoice.items">  
  16.                     <td>  
  17.                         <input type="text" ng:model="item.description" class="form-control">  
  18.                     </td>  
  19.                     <td>  
  20.                         <input type="number" min="1" ng:model="item.qty" ng:required class="form-control">  
  21.                     </td>  
  22.                     <td>  
  23.                         <input type="number" min="1" ng:model="item.cost" ng:required class="form-control">  
  24.                     </td>  
  25.                     <td>{{item.qty * item.cost | currency:'₹'}}</td>  
  26.                     <td>  
  27.                         <a href ng:click="removeItem($index)" class="btn btn-sm btn-danger"><i class="fa fa-trash"></i></a>  
  28.                     </td>  
  29.                 </tr>  
  30.                 <tr>  
  31.                     <td><a href ng:click="addItem()" class="btn btn-sm btn-primary rounded-0">Add Product</a></td>  
  32.                     <td></td>  
  33.                     <td>Total:</td>  
  34.                     <td>{{total() | currency:'₹'}}</td>  
  35.                 </tr>  
  36.             </tbody>  
  37.         </table>  
  38.     </div>  
  39. </body>  
Complete code
  1. <!DOCTYPE html>  
  2.   
  3. <html ng-app="myModule">  
  4. <head>  
  5.     <title>Shopping Card</title>  
  6.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">  
  7.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">  
  8.     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>  
  9.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>  
  10.     <script type="text/javascript">  
  11.         var app = angular  
  12.             .module("myModule", [])  
  13.             .controller("myController", function ($scope) {  
  14.                 $scope.invoice = {  
  15.                     items: [{  
  16.                         qty: 5,  
  17.                         description: 'Product-1',  
  18.                         cost: 120  
  19.                     }]  
  20.                 };  
  21.                 $scope.addItem = function () {  
  22.                     $scope.invoice.items.push({  
  23.                         qty: 1,  
  24.                         description: '',  
  25.                         cost: 0  
  26.                     });  
  27.                 },  
  28.   
  29.            $scope.removeItem = function (index) {  
  30.                $scope.invoice.items.splice(index, 1);  
  31.            },  
  32.   
  33.            $scope.total = function () {  
  34.                var total = 0;  
  35.                angular.forEach($scope.invoice.items, function (item) {  
  36.                    total += item.qty * item.cost;  
  37.                })  
  38.   
  39.                return total;  
  40.            }  
  41.             });  
  42.     </script>  
  43. </head>  
  44. <body ng-controller="myController">  
  45.     <div class="container py-3">  
  46.         <h4 class="text-center text-uppercase">How to calculate Shopping Card in Angular js</h4>  
  47.         <table class="table table-bordered">  
  48.             <thead class="bg-danger text-white text-upparcase">  
  49.                 <tr>  
  50.                     <th>Product</th>  
  51.                     <th>Quantity</th>  
  52.                     <th>Price</th>  
  53.                     <th>Total</th>  
  54.                     <th></th>  
  55.                 </tr>  
  56.             </thead>  
  57.             <tbody>  
  58.                 <tr ng:repeat="item in invoice.items">  
  59.                     <td>  
  60.                         <input type="text" ng:model="item.description" class="form-control">  
  61.                     </td>  
  62.                     <td>  
  63.                         <input type="number" min="1" ng:model="item.qty" ng:required class="form-control">  
  64.                     </td>  
  65.                     <td>  
  66.                         <input type="number" min="1" ng:model="item.cost" ng:required class="form-control">  
  67.                     </td>  
  68.                     <td>{{item.qty * item.cost | currency:'₹'}}</td>  
  69.                     <td>  
  70.                         <a href ng:click="removeItem($index)" class="btn btn-sm btn-danger"><i class="fa fa-trash"></i></a>  
  71.                     </td>  
  72.                 </tr>  
  73.                 <tr>  
  74.                     <td><a href ng:click="addItem()" class="btn btn-sm btn-primary rounded-0">Add Product</a></td>  
  75.                     <td></td>  
  76.                     <td>Total:</td>  
  77.                     <td>{{total() | currency:'₹'}}</td>  
  78.                 </tr>  
  79.             </tbody>  
  80.         </table>  
  81.     </div>  
  82. </body>  
  83. </html>  
Step-5

Run your file or project on the browser.

Final output
 
output
Next Recommended Reading Differences Between Angular 1.x & Angular v2