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

我有一个6行4列的表（第四行是总计：应该是上述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>

{{item}}
输入1：
输入2：
输入3：
总数：
{{collection.total}

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

带有ng模型的“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;
};

$scope.collections=[]；
$scope.getTotal=function（）{
var合计=0；
对于（var i=0；i<$scope.collections[i].length；i++）{
var myItems=$scope.collections[i]；
总计=（myItems.row1+myItems.row2+myItems.row3）；
}
返回总数；
};

---

谢谢。

如果您在后端计算总数

$scope.CalculatedTotal=某个值

因此，您可以在最后一行调用：

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

---

如果您计算后端中的总数，则类似于

$scope.CalculatedTotal=某个值

因此，您可以在最后一行调用：

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

---

类似这样的事情

为什么不直接在模板中执行呢

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

{{collection.row1+collection.row2+collection.row3}

---

此外，不应该有ng模型，除非它是

。这可能就是你的主要错误所在。Ng模型将尝试在

内设置值，因此角度模板（

{{X}}

）和Ng模型正在竞争给定代码中

内的显示值

为什么不干脆在模板中执行呢

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

{{collection.row1+collection.row2+collection.row3}

---

此外，不应该有ng模型，除非它是

。这可能就是你的主要错误所在。Ng模型将尝试在

内设置值，因此角度模板（

{{X}}

）和ng模型正在竞争您给定代码中的

内的显示值

显示您尝试过的内容…提供一个fiddle plz:）显示您尝试过的内容…提供一个fiddle plz:）我可以从后端显示我的计算值，但我希望看到而不是{CalculatedTotal}编辑其他所有输入的总和。类似于$scope.watch（'collection.total'，function（）{$scope.total=$scope.collection[i].row1+$scope.collection[i].row2+$scope.collection[i].row3；}）；使用数据ng模型而不是ng模型并将您的数据ng模型放在父副本中我可以从后端显示我的计算值，但我希望在编辑其他所有输入时看到它们的总和，而不是{{CalculatedTotal}。类似于$scope.watch（'collection.total'，function（）{$scope.total=$scope.collection[i].row1+$scope.collection[i].row2+$scope.collection[i].row3；}）；使用数据ng模型而不是ng模型，并将数据ng模型放在父repeatHmmm中。我尝试了这个方法，它将连接3个值而不是求和。{（collection.row1*1）+（collection.row2*1）+（collection.row3*1）}对我有效，但现在我遇到了另一个问题。我的输入类型是“文本”，但我的输入是指时间（hh:mm），显然不能这样求和。请将类型更改为

，你的问题是关于3个输入的求和，如果我帮你投票/接受，以换取我的时间。。如果您有不同的问题，请询问另一个问题。我无法在赢得少于15个声誉的情况下投票，我的帐户是新的。：）但是我已经接受了你的回答。我尝试了这个方法，它将连接3个值而不是求和。{（collection.row1*1）+（collection.row2*1）+（collection.row3*1）}对我有效，但现在我遇到了另一个问题。我的输入类型是“文本”，但我的输入是指时间（hh:mm），显然不能这样求和。请将类型更改为

，你的问题是关于3个输入的求和，如果我帮你投票/接受，以换取我的时间。。如果您有不同的问题，请询问另一个问题。我无法在赢得少于15个声誉的情况下投票，我的帐户是新的。：）但我接受了你的回答。