AngularJS - Angular Filter Group By sum rows

Question

I need to sum all ages by gender. The result required is as follow:

But I only can get the total of all ages of both genders male and female, please see the following source code to see in more detail what I want to do.

JSFiddle Source Code

var demoApp = angular.module("demoApp", ["angular.filter"]);
demoApp.controller("MainController", function($scope) {
  $scope.users = [{
    id: 1,
    name: "Mike",
    age: 22,
    gender: "Male"
  }, {
    id: 2,
    name: "Joe",
    age: 28,
    gender: "Male"
  }, {
    id: 3,
    name: "David",
    age: 30,
    gender: "Male"
  }, {
    id: 4,
    name: "Susan",
    age: 25,
    gender: "Female"
  }, {
    id: 5,
    name: "Marie",
    age: 27,
    gender: "Female"
  }, {
    id: 6,
    name: "Julie",
    age: 33,
    gender: "Female"
  }];
  $scope.sumByGender = function() {
    var total = 0;
    for (count = 0; count < $scope.users.length; count++) {
      total += $scope.users[count].age;
    }
    return total;
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div ng-app="demoApp" ng-controller="MainController">
  <div ng-repeat="(key, value) in users | groupBy: 'gender'">
    Gender: {{key}}
    <div>
      <table class="table table-bordered">
        <thead>
          <tr>
            <td>#</td>
            <td>Name</td>
            <td>Age</td>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="user in value">
            <td>{{user.id}}</td>
            <td>{{user.name}}</td>
            <td>{{user.age}}</td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td colspan="2" class="text-right">Total</td>
            <td>{{sumByGender()}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

charlietfl · Accepted Answer · 2016-02-10 02:23:31Z

2

Pass in gender as argument to your sumByGender() Then check each item's gender before including in total

HTML

{{sumByGender(key)}}

JS

$scope.sumByGender = function(gender) {
    // Here I need to sum by gender
    var total = 0;
    for (var count = 0; count < $scope.users.length; count++) {

      if ($scope.users[count].gender == gender) {
        total += $scope.users[count].age;
      }

    }
    return total;
}

DEMO

edited Feb 10, 2016 at 2:23

answered Feb 10, 2016 at 2:20

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

5 Comments

wilson Over a year ago

yep! that's what I'm talkig about

wilson Over a year ago

@charlietfl Hi, Can you help me with this similar situation? I have been trying to apply the previously source code but I think I missing something. link

charlietfl Over a year ago

you don't have argument set up in function and not passing a value to filter the totals by

wilson Over a year ago

@charlietfl Thanks for reply. I have updated the source code based on your answer by I have a problem with argument. Please take a look one more time. source code

wilson Over a year ago

@fergus Do you have any idea about how to resolve this similar problem? similar question Thanks.

Collectives™ on Stack Overflow

AngularJS - Angular Filter Group By sum rows

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related