javascript - Summing table rows generated with AngularJS by using jQuery -
it maybe sounds weird based in following table need sum rows using jquery. i'm using angularjs list users need each row jquery , show sum of them.
the problem don't know how value of each row in order make 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} ] });
the best solution not modification outside of angulars scope
read this: "thinking in angularjs" if have jquery background?
but if must access outside of angular correct way it:
$('table').scope().users.reduce((a,b) => a+b.age, 0) i more 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>
Comments
Post a Comment