Javascript 添加所有行值并显示总计

如何添加列的行数据并显示表的标题部分附近的总计

示例代码

我想添加余额金额列，并在标题部分（靠近余额金额标题）显示总额。 我试着使用下面的代码，但它没有计算总数

 <th class="col-xs-4 col-sm-3 col-md-4 col-lg-4" style="width:10%;white-space : nowrap;text-align: center;">Balance Amt
       <div ng:repeat="data in myResults">
         {{myResults.$sum('balanceAmount')}}
         </div>                 
   </th>

余额金额
{{myResults.$sum（'balanceAmount'）}

---

我想用angularjs来做。任何输入？

都使用了由计算器中的for循环计算的范围变量量

var-app=angular.module（'myApp'，[]）；
app.controller（'customersCtrl'，函数（$scope，$http）{
$scope.myResults=[
{姓名：'John'，callerId:'1234'，数据计划：'new'，已付金额：100，余额金额：30，月份：'jan'}，
{名称：'Dex'，调用方：'2345'，数据计划：'other'，已付金额：100，余额金额：30，月份：'feb'}，
{姓名：'Joe'，调用方：'3456'，数据计划：''，支付金额：100，余额金额：30，月份：'march'}，
{name:'Ann'，callerId:'1234'，dataPlan:'new'，已付金额：100，余额金额：30，月份：'apr'}，
{name:'Sam'，callerId:'2345'，dataPlan:'other'，已付金额：100，余额金额：30，月份：'may'}，
{名称：'Sam S'，调用方：'3456'，数据计划：''，已支付金额：100，余额金额：30，月份：'june'}，
];
sum=函数（）{
$scope.amount=0；
对于（变量i=0；i<$scope.myResults.length；i++）{
$scope.amount+=$scope.myResults[i].amountPaid；
}
}
sum（）；
});

.嗯{
背景：无；
高度：600px；
}
.表格滚动体{
位置：绝对位置；
溢出y：滚动；
高度：500px；
}
.表格滚动tr{
宽度：100%；
表布局：固定；
显示：内联表；
}
.表格滚动AD>tr>th{
边界：无；
}
名称
来电显示
数据计划
已付金额总额：{{Amount}
余额金额
月
{{data.name}
{{data.callerId}
{{data.dataPlan}
{{data.amountPaid}}
{{data.balanceAmount}
{{data.month}
您可以在javascript中使用
map
和
reduce
数组方法，而无需使用for循环或
如下所示

我已在
$scope
中添加了新变量，以在
$scope.filteredArray
中存储仅包含余额的过滤数组，并在
$scope.total
中显示总数。如果数组较大，则此方法比手动循环数组更快

javascript代码

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
    $scope.myResults=[
    { name:'John',callerId:'1234',dataPlan:'new',amountPaid:100,balanceAmount:30,month:'jan'},
    { name:'Dex',callerId:'2345',dataPlan:'another',amountPaid:100,balanceAmount:30,month:'feb'},
    { name:'Joe',callerId:'3456',dataPlan:'',amountPaid:100,balanceAmount:30,month:'march'},
    { name:'Ann',callerId:'1234',dataPlan:'new',amountPaid:100,balanceAmount:30,month:'apr'},
    { name:'Sam',callerId:'2345',dataPlan:'another',amountPaid:100,balanceAmount:30,month:'may'},
    { name:'Sam S',callerId:'3456',dataPlan:'',amountPaid:100,balanceAmount:30,month:'june'},


    ];

     $scope.filteredArray = $scope.myResults.map(function(x){
      return x["balanceAmount"];
    });
      $scope.total = $scope.filteredArray.reduce(function(initial, currentValue) {
    return initial + currentValue;
  });


});

更改HTML以显示
total
值

 <th class="col-xs-4 col-sm-3 col-md-4 col-lg-4" style="width:10%;white-space : nowrap;text-align: center;">Balance Amt:
       <span>
         {{total}}
       </span>
 </th>

。嗯{
背景：无；
高度：600px；
}
.表格滚动体{
位置：绝对位置；
溢出y：滚动；
高度：500px；
}
.表格滚动tr{
宽度：100%；
表布局：固定；
显示：内联表；
}
.表格滚动AD>tr>th{
边界：无；
}

名称
来电显示
数据计划
已付金额
余额金额：
{{total}}
月
{{data.name}
{{data.callerId}
{{data.dataPlan}
{{data.amountPaid}}
{{data.balanceAmount}
{{data.month}
您可以从数组中使用
map
和
reduce
。在下面检查我的答案