Question

所以我有一个包含行数据的表格，我希望在最后一列上有这样的总和，如下所示：

a   b   c   d   total
1   1   1   1     4
3   1   3   8    15
0   4   0   1     5

这是表格的主体：

<tbody>
    <tr ng-repeat="rows in $ctrl.tableData[0] track by $index">
        <td ng-repeat="label in $ctrl.xTableAxis">{{$ctrl.tableData[$index][$parent.$index].toFixed(2)}}</td>
        <td>show the sum here</td>
    </tr>
</tbody>

值在这里：$ctrl.tableData[$index][$parent.$index].toFixed(2)，问题是如何将打印件添加到下一个<td>。

有没有办法在体内添加值？

Answer 1

你建议的方法不能以优雅的方式在ng-repeat中完成（这本身已经足够丑陋了）。

正确的方法是使用简单的reduce函数。

<tbody>
    <tr ng-repeat="rows in $ctrl.tableData[0] track by $index">
        <td ng-repeat="label in $ctrl.xTableAxis">{{$ctrl.tableData[$index][$parent.$index].toFixed(2)}}</td>
        <td>{{ $ctrl.tableData[$index].reduce((a,b)=>a+b)}}</td>
    </tr>
</tbody>

编辑：

如果出现语法错误，您可以执行以下操作：

在模板中：

<tbody>
    <tr ng-repeat="rows in $ctrl.tableData[0] track by $index">
        <td ng-repeat="label in $ctrl.xTableAxis">{{$ctrl.tableData[$index][$parent.$index].toFixed(2)}}</td>
        <td>{{ $ctrl.tableData[$index].reduce(add)}}</td>
    </tr>
</tbody>

在控制器中：

$scope.add = (a,b)=>a+b

Answer 2

检查这个小提琴，希望它有所帮助

http://jsfiddle.net/hjk5evv2/

JS：

angular.module('app',['QuickList']).controller('mainCtrl', function($scope){

    $scope.items = [
  [1, 2],
  [3, 4],
  [5, 6]
];
$scope.sum = function(array){
return array.reduce(add, 0);
}

function add(a, b) {
    return a + b;
}
})

HTML：

<div ng-app='app' ng-controller='mainCtrl'>
    {{ctrlTest}}<hr/>Ng-Repeat<hr/>

  <table>
  <tr ng-repeat="x in items">
    <td ng-repeat="y in x">{{ y }}</td>
    <td>{{ sum(x) }}</td>
  </tr>
</table>

</div>

将ng-repeat中的值添加到总和中

2 个答案: