AngularJS sum of rows ng-repeat

Question

I add dynamically rows in my table with ng-repeat, coming from an array.

Now I want to get the sum of all sums per row (group.sum * group.perc / 100.0). I need it in a variable because I need this value for further calculations. Thank you

HTML

<tr ng-repeat="group in groupsArr">                                         
  <td class="total-rows" ng-model="taxes">{{group.sum * group.perc / 100.0 | currency :""}}</td>
</tr>

SCRIPT

var taxTotals = 0;
var taxTotals = 
  for (i=0; i<group.length; i++) {
    taxTotal = taxTotal + group[i].taxes;    
};
console.log(taxTotals);
};

Mo. · Accepted Answer · 2014-12-03 09:14:46Z

8

Create a Filter:

 app.filter('sumFilter', function() {
     return function(groups) {
         var taxTotals = 0;
         for (i=0; i<groups.length; i++) {
             taxTotal = taxTotal + groups[i].taxes;    
          };
         return taxTotals;
     };
 });

Use the $filter service:

 app.controller('myController', function($scope, $filter) {
      $scope.groups = [...];

      var taxTotals = $filter('sumFilter')($scope.groups);
      console.log(taxTotals);
 });

Use it in your HTML:

<tr ng-repeat="group in groupsArr">                                         
    <td class="total-rows" ng-model="taxes">{{group.sum * group.perc / 100.0 | currency :""}}    </td>
</tr>
 <tr>
      <b> Tax Totals: </b> {{ groupsArr | sumFilter | currency }}
 </tr>

edited Dec 3, 2014 at 9:14

Mo.

27.6k36 gold badges167 silver badges235 bronze badges

answered May 24, 2014 at 9:24

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mm1975 Over a year ago

Thanks for the hint doing it with a filter. Now I get an exception Cannot read property 'length' of undefined within the filter. `angular.module('App.filters', []).filter('sumFilter', [function () {return function(groups) {var taxTotals = 0; for (i=0; i<groups.length; i++) { taxTotal = taxTotal + groups[i].taxes; }; return taxTotals; }; }]);

Michael Kang Over a year ago

How are you using the filter? Are you sure you are passing in an array that is defined?

Dario Chuquilla · Accepted Answer · 2014-11-12 21:16:03Z

An addition for best answer... I am using filter in my very huge table, so it is how to implement with dynamic filters.

THE FILTER

app.filter('sumStatusFilter', function(){
return function (items, filtersStatus, filterLocations){
  var filtered = [];
  var filtered1 = [];
  var total = 0;
  if (typeof filtersStatus != 'undefined') {
    angular.forEach(items, function(item) {
      for(i = 0; i < filtersStatus.length; i ++){
        if(filtersStatus[i] == item.status_message)
          filtered.push(item);  
      }
    });
  }

  if (typeof filterLocations != 'undefined') {
    angular.forEach(filtered, function(item) {
      for(i = 0; i < filterLocations.length; i ++){
        if(filterLocations[i] == item.office_location)
          filtered1.push(item);  
      }
    });
    filtered = [];
    filtered = filtered1;
  }

  if (filtered.length == 0) {
    filtered = this.jobs
  }
  angular.forEach(filtered, function(value, key){
    total += value.restoration_reserve
  });
  return total;
}

});

in HTML

<tr><td>Total: {{ report_controller.items | sumStatusFilter:report_controller.status_message_selections:report_controller.office_selections | currency }}</td></tr>

Mo. · Accepted Answer · 2014-12-03 09:10:33Z

0

UPDATE AFTER ANSWER coming from pixelbits

Thanks to pixelbits. Here is my filter, which works perfect within the view.

HTML

<tr ng-repeat="group in groupsArr">                                         
    <td class="total-rows" ng-model="taxes">{{group.sum * group.perc / 100.0 | currency :""}}    </td>
</tr>
 <tr>
      <b> Tax Totals: </b> {{ groupsArr | sumFilter | currency }}
 </tr>

Filter

angular.module('App.filters', []).filter('sumFilter', [function () {
// filter for tax sum
     return function(groups, lenght) {
         var taxTotal = 0; 
         for (i=0; i < groups.length; i++) {            
             taxTotal = taxTotal + ((groups[i].perc * groups[i].sum) / 100);  
          };
         return taxTotal;
     }; 
    }]);

If I want to access from my controller, it doesn´t work: I cannot get the variable taxTotals *Cannot read property 'length' of undefined As mentioned, in the view it works.

Filter Service

var taxTotal = $filter('sumFilter')($scope.groups);
console.log(taxTotal);

edited Dec 3, 2014 at 9:10

Mo.

27.6k36 gold badges167 silver badges235 bronze badges

answered May 24, 2014 at 13:57

mm1975

1,6555 gold badges32 silver badges54 bronze badges

1 Comment

Michael Kang Over a year ago

In your original code, I think you had $scope.groupArr - if I recall correctly. If $scope.groupArr is where you have your array populated, then pass this to your $filter function. i.e. $filter('sumFilter')($scope.groupArr);

40pro · Accepted Answer · 2016-01-18 08:20:13Z

0

Or use Map Reduce!

Controller

$scope.mappers = {
        tax: function(m){
            return group.sum * group.perc / 100.0;
        }
    }


$scope.sum = function(m){
        if($scope.groupsArr.length == 0) return;
        return $scope.groupsArr.map(m).reduce(function(p, c){
            return p + c;
        }) || 0;
};

HTML

<tr ng-repeat="group in groupsArr">                                         
    <td class="total-rows" ng-model="taxes">{{group.sum * group.perc / 100.0 | currency :""}}    </td>
</tr>
 <tr>
      <b> Tax Totals: </b> {{ sum(mappers.tax) }}
 </tr>

answered Jan 18, 2016 at 8:20

40pro

1,2813 gold badges16 silver badges23 bronze badges

Collectives™ on Stack Overflow

AngularJS sum of rows ng-repeat

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related