CODEWITHSUNDEEP
angularjs
MUHSIN MOHAMED PC
MUHSIN MOHAMED PC

Reputation: 167

How to get total sum of a column in ng-repeat

I am trying to get the sum of a column in My ng-repeat table. I shared the image of the table below this paragraph.

enter image description here

Code of the table is given below.

<table>
   <tr>
     <th>Ref No</th><th>Model</th><th>IMEI</th><th>Color</th><th>Warranty</th><th>Branch</th><th>Party</th><th>Date of Sell</th><th>Amount</th>
   </tr>
  <tr ng-repeat="x in Approve"><td> {{ x.sno }} </td><td> {{ x.p_model }} </td><td> {{ x.imei }} </td><td> {{ x.color }} </td><td> {{ x.warrenty }} </td><td> {{ x.branch }} </td><td> {{ x.party }} </td><td> {{ x.dsell }} </td><td ng-init="Approve.total.amount = Approve.total.amount + x.rate"> {{ x.amount | number:2 }} </td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td style="color:red;">Grand Total</td><td>{{ grandtotal }}</td></tr>
</table>

My Controller code given below.

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("api/sold_out.php").then(function (response) {
$scope.Approve = response.data.message;
});
});
</script>

Jsone fetch from the server:

{"message":[{"0":"2","sno":"2","1":"Huawei P9 Lite ","p_model":"Huawei P9 Lite ","2":"545454545454","imei":"545454545454","3":"White","color":"White","4":"CGC","warrenty":"CGC","5":"50","amount":"50","6":"1","sell":"1","7":"27\/02\/2017","dsell":"27\/02\/2017","8":"1","transfer":"1","9":"MANSOURA","branch":"MANSOURA","10":"Cloud International Co Will","party":"Cloud International Co Will"},{"0":"3","sno":"3","1":"Samsung Galaxy J7 6","p_model":"Samsung Galaxy J7 6","2":"456545454545545","imei":"456545454545545","3":"Gold","color":"Gold","4":"Gasham","warrenty":"Gasham","5":"100","amount":"100","6":"1","sell":"1","7":"27\/02\/2017","dsell":"27\/02\/2017","8":"1","transfer":"1","9":"MANSOURA","branch":"MANSOURA","10":"Cloud International Co Will","party":"Cloud International Co Will"}]}

I need to display the total sum value of the Amount column in the Grand Total area.

Upvotes: 3

Views: 13836

Answers (2)

mohammedobaidulla
mohammedobaidulla

Reputation: 1

<table>
   <tr>
     <th>Ref No</th><th>Model</th><th>IMEI</th><th>Color</th><th>Warranty</th><th>Branch</th><th>Party</th><th>Date of Sell</th><th>Amount</th>
   </tr>
  <tr ng-repeat="x in Approve"><td> {{ x.sno }} </td><td> {{ x.p_model }} </td><td> {{ x.imei }} </td><td> {{ x.color }} </td><td> {{ x.warrenty }} </td><td> {{ x.branch }} </td><td> {{ x.party }} </td><td> {{ x.dsell }} </td><td ng-init="$parent.grandtotal  = grandtotal + x.rate"> {{ x.amount | number:2 }} </td></tr>
  <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td style="color:red;">Grand Total</td><td>{{ grandtotal }}</td></tr>
</table>

Upvotes: 0

lkartono
lkartono

Reputation: 2393

As I said in my comment, one way to solve this could be by using a custom filter that would look like :

(function() {
  'use strict';

  angular
    .module('Test', [])
    .filter('sumByColumn', function () {
      return function (collection, column) {
        var total = 0;

        collection.forEach(function (item) {
          total += parseInt(item[column]);
        });

        return total;
      };
    });
})();

You could then call that filter on your collection by specifying which column you want to sum:

<td>{{ Approve | sumByColumn: 'amount' }}</td>

The advantage of using a filter here, IMHO, is that it is reusable. Whenever you need to sum a specific column on any data, you can do it using this filter again.

Of course I advise you to improve it by checking that the column value is a number for example...etc...Since it is a filter, you can easily write tests for it.

I've created a JsFiddle in order to demonstrate how it works within your context https://jsfiddle.net/7b3q2q5p/4/

Upvotes: 6

Related Questions