Summing table rows generated with AngularJS by using jQuery

Question

It maybe sounds weird but based in the following table I need to sum all rows by using jQuery. I'm using angularjs to list all users but I need to get each row with jQuery and then show the sum of all them.

The only problem is I don't know how to get the value of each row in order to make the operation.

HTML

<div data-ng-app="app" data-ng-controller="controllerApp">
<table border="1">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
   </thead>
   <tbody>
         <tr data-ng-repeat="user in users">
             <td>{{user.name}}</td> 
             <td class="sum">{{user.age}}</td>
         </tr>
   </tbody>
   <tfoot>
         <tr>
              <td><strong>Sum</strong></td>
              <td></td>
         </tr>
   </tfoot>
</table>
</div>

Javascript

$(function(){
function tally (selector) {
    $(selector).each(function () {
        var total = 0,
            column = $(this).siblings(selector).andSelf().index(this);
        $(this).parents().prevUntil(':has(' + selector + ')').each(function () {
            total += parseFloat($('td.sum:eq(' + column + ')', this).html()) || 0;
        })
        $(this).html(total);
    });
}
tally('td.total');
});

Angularjs

var app = angular.module("app", []);
app.controller("controllerApp", function($scope){
    $scope.users = [
        {name: "Marie", age: 24},
        {name: "Andy", age: 26},
        {name: "Peter", age: 21},
        {name: "Elizabeth", age: 23},
        {name: "Frank", age: 27},
        {name: "Claire", age: 25}
    ]
});

Don't use jQuery or any DOM query to do it... use the javascript controller — Endless
– Endless, Commented Nov 10, 2016 at 20:51

Community · Accepted Answer · 2017-05-23 12:30:33Z

1

The best solution is not to do any modification outside of the angulars scope
Read this: "Thinking in AngularJS" if I have a jQuery background?

But if you really must access it from outside of angular then this is the correct way to do it:

$('table').scope().users.reduce((a,b) => a+b.age, 0)

I would do it something more like this:

$scope.users = [
    {name: "Marie", age: 24},
    {name: "Andy", age: 26},
    {name: "Peter", age: 21},
    {name: "Elizabeth", age: 23},
    {name: "Frank", age: 27},
    {name: "Claire", age: 25}
]

$scope.totally = $scope.users.reduce((a,b) => a+b.age, 0)
// <td class="total">{{totally}}</td>

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered Nov 10, 2016 at 20:58

Endless

38.8k14 gold badges118 silver badges138 bronze badges

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

Comments

Samuel Reid · Accepted Answer · 2016-11-10 21:03:29Z

1

After deciding that it's more trouble than it's worth to figure out how to execute jQuery after Angular is finished rendering, the following is my solution using just Angular and some LoDash.

var app = angular.module("app", []);
app.controller("controllerApp", function($scope){
    $scope.users = [
        {name: "Marie", age: 24},
        {name: "Andy", age: 26},
        {name: "Peter", age: 21},
        {name: "Elizabeth", age: 23},
        {name: "Frank", age: 27},
        {name: "Claire", age: 25}
    ];
    $scope.sum = _.reduce($scope.users, function(sum, n) {
      return sum + n.age;
    }, 0);
});

<script src="https://cdn.jsdelivr.net/lodash/4.16.6/lodash.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app" data-ng-controller="controllerApp">
<table border="1">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
   </thead>
   <tbody>
         <tr data-ng-repeat="user in users">
             <td>{{user.name}}</td> 
             <td class="sum" tally>{{user.age}}</td>
         </tr>
   </tbody>
   <tfoot>
         <tr>
              <td><strong>Sum</strong></td>
              <td>{{ sum }}</td>
         </tr>
   </tfoot>
</table>
</div>

answered Nov 10, 2016 at 21:03

Samuel Reid

1,7761 gold badge12 silver badges23 bronze badges

2 Comments

Endless Over a year ago

You don't need lodash for just this simple thing... javascript has reduce built in ...in decent browsers

Samuel Reid Over a year ago

Yea you're right, you don't "need" it cause javascript has it built in. I wan't aware that javascript has it built in until I saw your answer. In my brain I went "oh that'll need some collection operation, so LoDash!"

Collectives™ on Stack Overflow

Summing table rows generated with AngularJS by using jQuery

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related