Summieren von Tabellenzeilen, die mit AngularJS mithilfe von jQuery generiert wurden

Question

Es klingt vielleicht komisch, aber im folgenden basiert table Ich muss alle Zeilen mithilfe von jQuery summieren. Ich verwende angularjs, um alle Benutzer aufzulisten, aber ich muss jede Zeile mit jQuery abrufen und dann die Summe aller anzeigen.

Das einzige Problem ist, ich weiß nicht, wie man den Wert jeder Zeile erhält, um die Operation zu machen.

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} 
    ] 
}); 

Answer 1

Die beste Lösung ist nicht auf d o jeder Änderung außerhalb des winkelförmigen Stange Umfangs
dies lesen: "Thinking in AngularJS" if I have a jQuery background?

Aber wenn Sie es wirklich von außerhalb des Winkels zugreifen müssen, dann ist dies der richtige Weg, es zu tun:

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

ich es tun würde etwas mehr wie folgt aus:

$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> 

Answer 2

nach der Entscheidung, dass es mehr Mühe ist als es wert ist, herauszufinden, wie jQuery ausgeführt werden, nachdem Angular Rendering abgeschlossen ist, ist die folgende meine Lösung mit jus t Angular und 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>