如何获得ng-repeat列中的总和

Question

我正在尝试获取我的ng-repeat表中列的总和。我分享了本段下方表格的图像。

表中的代码如下。

<table> 
    <tr> 
    <th>Ref No</th><th>Model</th><th>IMEI</th><th>Color</th><th>Warranty</th><th>Branch</th><th>Party</th><th>Date of Sell</th><th>Amount</th> 
    </tr> 
    <tr ng-repeat="x in Approve"><td> {{ x.sno }} </td><td> {{ x.p_model }} </td><td> {{ x.imei }} </td><td> {{ x.color }} </td><td> {{ x.warrenty }} </td><td> {{ x.branch }} </td><td> {{ x.party }} </td><td> {{ x.dsell }} </td><td ng-init="Approve.total.amount = Approve.total.amount + x.rate"> {{ x.amount | number:2 }} </td></tr> 
    <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td style="color:red;">Grand Total</td><td>{{ grandtotal }}</td></tr> 
</table> 

我的控制器代码如下。

<script> 
var app = angular.module('myApp', []); 
app.controller('customersCtrl', function($scope, $http) { 
$http.get("api/sold_out.php").then(function (response) { 
$scope.Approve = response.data.message; 
}); 
}); 
</script> 

Jsone从服务器获取：

{"message":[{"0":"2","sno":"2","1":"Huawei P9 Lite ","p_model":"Huawei P9 Lite ","2":"545454545454","imei":"545454545454","3":"White","color":"White","4":"CGC","warrenty":"CGC","5":"50","amount":"50","6":"1","sell":"1","7":"27\/02\/2017","dsell":"27\/02\/2017","8":"1","transfer":"1","9":"MANSOURA","branch":"MANSOURA","10":"Cloud International Co Will","party":"Cloud International Co Will"},{"0":"3","sno":"3","1":"Samsung Galaxy J7 6","p_model":"Samsung Galaxy J7 6","2":"456545454545545","imei":"456545454545545","3":"Gold","color":"Gold","4":"Gasham","warrenty":"Gasham","5":"100","amount":"100","6":"1","sell":"1","7":"27\/02\/2017","dsell":"27\/02\/2017","8":"1","transfer":"1","9":"MANSOURA","branch":"MANSOURA","10":"Cloud International Co Will","party":"Cloud International Co Will"}]} 

我需要显示在大总面积的金额列的总总和值。

Answer 1

正如我在我的评论说，一个办法来解决，这可能是通过使用自定义过滤器，看起来像：

(function() { 
    'use strict'; 

    angular 
    .module('Test', []) 
    .filter('sumByColumn', function() { 
     return function (collection, column) { 
     var total = 0; 

     collection.forEach(function (item) { 
      total += parseInt(item[column]); 
     }); 

     return total; 
     }; 
    }); 
})(); 

然后，您可以通过指定要哪个列致电您的收藏该过滤器总结：

<td>{{ Approve | sumByColumn: 'amount' }}</td> 

在这里使用过滤器，恕我直言，其优点是它是可重复使用的。无论何时您需要总结任何数据上的特定列，您可以再次使用此过滤器进行操作。

当然，我建议你通过检查列值是一个数字来改善它，例如......等等。由于它是一个过滤器，你可以很容易地为它编写测试。

我创建了一个的jsfiddle，以证明它是如何工作的背景下https://jsfiddle.net/7b3q2q5p/4/