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. },
  19. $scope.removeItem = function (index) {
  20. $scope.invoice.items.splice(index, 1);
  21. },
  23. $scope.total = function () {
  24. var total = 0;
  25. angular.forEach($scope.invoice.items, function (item) {
  26. total += item.qty * item.cost;
  27. })
  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>
  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. },
  29. $scope.removeItem = function (index) {
  30. $scope.invoice.items.splice(index, 1);
  31. },
  33. $scope.total = function () {
  34. var total = 0;
  35. angular.forEach($scope.invoice.items, function (item) {
  36. total += item.qty * item.cost;
  37. })
  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