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">
      <div class="table-responsive">
      <table  class="customer-list table table-striped">
      <thead>
        <tr>
          <!-- <th>#</th> -->
          <th class="Column-Header">קוד מוצר</th>
          <th class="Column-Header">שם מוצר</th>
          <th class="Column-Header">תיאור מוצר</th>
          <!-- <th class="Column-Header">כמות במלאי</th>
          <th class="Column-Header">סה"כ</th> -->
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in stockReport" ng-init="setTotals(item)">
              <td>{{item.ProductName}}</td>
              <td>{{item.quantity}}</td>
          </tr>
      <tfoot>
          <tr class="bg-warning">
              <td>Totals</td>
              <td>{{invoiceCount}}</td>
              <td></td>
          </tr>

        </tfoot>

        </table>
    
    </div>
</div>

JavaScript

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

function invoice($scope) {
    $scope.stockReport = [{
        ProductName: 'Baseball Bats',
        quantity: 2
        
    }, {
        ProductName: 'Soccer Balls',
        quantity: 5
        
    }, {
        ProductName: 'Baseball Gloves',
        quantity: 3
        
    }];
    
    $scope.invoiceCount = 0;
    $scope.invoiceTotal = 0;
    
    $scope.setTotals = function(item){
        if (item){
            item.total = item.quantity * item.unitCost;
            $scope.invoiceCount += item.quantity;
           
        }
    }
}