AngularJS Calculating Total with ng-repeat

created by ozkary.com

by Sajeetharan Sinnathurai

HTML

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-app="app">
  <div ng-controller="app.invoice" class="container">
    <ul>
    
      <li class="basket-item"  ng-change="setTotals(item)"  ng-repeat="product in products">
        <div class="product-item-image">
          <img src={{product.imageUrl}} />
        </div>
        <div class="product-item-description">
          <h2><a href="product.html">{{product.title}}</a></h2>
          <a href="#">Description</a>
        </div>
        <div class="product-item-qtn">
          <input type="number" name=quantity ng-model="product.qty"> st
          <p><b>quantiy</b>1-3</p>
        </div>
        <p class="product-item-price">x {{product.prices[0].amount}} {{product.prices[0].currency}}</p>
        <p class="product-item-total">{{product.prices[0].amount * product.qty}}</p>
      </li>
    </ul>
   
  </div>
  <h1>
  Total
  </h1>
  </h1>
   <span>{{totalAmount}}</span>
</div>

JavaScript

var app = angular.module('app', []);
app.controller('app.invoice', ['$scope', invoice]);

function invoice($scope) {
  $scope.products = [{
    "id": 22565423428,
    "title": "SV 8GB USB Flash Memory E100",
    "imageUrl": "/images/22565423428.png",
    "url": "/products/22565423428",
    "qty":0,
    "prices": [{
      "amount": 159.92,
      "currency": "SEK"
    }]
  }, {
    "id": 22565423394,
    "title": "Litware Wireless Mouse M35",
    "imageUrl": "/images/22565423394.png",
    "url": "/products/22565423394",
      "qty":0,
    "prices": [{
      "amount": 239.6,
      "currency": "SEK"
    }]
  }];

  
  $scope.invoiceTotal = 0;

  $scope.setTotals = function(item) {
    if (item) {
      item.total = item.qty * item.prices[0].amount;
       
      $scope.invoiceTotal += item.total;
    }
  }
}