jQueryを使用してAngularJSで生成された集計表の行

Question

これは奇妙に聞こえるかもしれませんが、以下に基づいていますtable jQueryを使用してすべての行を合計する必要があります。私はangularjsを使用してすべてのユーザーをリストアップしていますが、各行をjQueryで取得して、それらの合計を表示する必要があります。

唯一の問題は、操作を行うために各行の値を取得する方法がわかりません。

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

最善の解決策は、Dではありません
angularsの範囲外のいかなる修正oをこの読み：あなたは本当に、角度の外からアクセスする必要がある場合"Thinking in AngularJS" if I have a jQuery background?

をしかし、これはそれを行うための正しい方法である：

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

私はそれを行うだろうもっとこのような何か：

$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

それは角度がレンダリングを終了した後にjQueryを実行する方法を見つけ出すために価値があるよりも、多くの問題だということを決定した後は、次は私の解決策使用して強行されt Angularおよび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>