Question

我有一个包含6行和4列的表（第四个是Total：应该是上述3列的总和）。基本上我想要做的是计算每列的总和并显示第四列中的总数。我的表是使用ng-repeat生成的。

类似的东西：

<table>
    <thead>
      <tr>
        <th ng-repeat="item in items">{{item}}</th>
      </tr>
    </thead>

        <tbody>
          <tr>
            <td>Input1:</td>
            <td ng-repeat="collection in collections">
             <input type="text" ng-model="collection.row1">
            </td>
          </tr>
          <tr>
            <td>Input2:</td>
            <td ng-repeat="collection in collections">
             <input type="text" ng-model="collection.row2">
            </td>
          </tr>
          <tr>
            <td>Input3:</td>
            <td ng-repeat="collection in collections">
             <input type="text" ng-model="collection.row3">
            </td>
          </tr>
          <tr>
            <td>Sum:</td>
            <td ng-repeat="collection in collections" ng-model="collection.total">
             {{collection.total}}
            </td>
          </tr>
       </tbody>
    </table>

来自ng-repeat的

“collections”将是一个包含6个对象的数组，我使用GET方法从API获取并将数据存储在$ scope中。

带有ng-model的“Total”行来自后端，已经完成了微积分，但我需要一种方法在客户端上显示它，因为它正在动态更新。

我已经尝试过$ watch和$ watchCollection以及ng-change但我找不到让它工作的方法。在我的控制器中，我使用了一个for来浏览我的对象数组，并尝试对每个[i]位置求和，但这不起作用。

我的问题还有其他解决方案吗？

以下是我在控制器中尝试的内容：

$scope.collections = [];

$scope.getTotal = function(){
    var total = 0;
    for(var i = 0; i < $scope.collections[i].length; i++){
        var myItems= $scope.collections[i];
        total = (myItems.row1+ myItems.row2+ myItems.row3);
    }
    return total;
};

谢谢。

Answer 1

如果计算后端的总数

$ scope.CalculatedTotal =一些价值;

所以你可以在最后一行打电话：

        <td>Sum:</td>
        <td ng-repeat="collection in collections" ng-model="collection.total">
         {{CalculatedTotal}}
        </td>

或将CalculatedTotal存储到对象

currentCollection.Total = CalculatedTotal;

类似的东西

Answer 2

为什么不在模板中简单地进行操作？

<td>{{collection.row1 + collection.row2 + collection.row3}}</td>

此外，除非是<input>，否则不应该有ng模型。这可能是你的主要错误所在。 Ng模型将尝试在<td>内设置值，因此角度模板（{{X}}）和ng模型竞争{{1}内的显示值在您给出的代码中

Angular.Js使用其他3个输入的总和动态更新输入

2 个答案: