Angular.Js動態更新輸入其他3個輸入的總和

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-重複「集合」將與6個對象，我正在從API使用GET方法獲取和存儲我的數據在$範圍的數組。

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

爲什麼不直接做模板？

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

此外，除非是<input>，否則不應該有ng模型。這可能是你的主要錯誤所在。 Ng模型會嘗試設置<td>的值，因此角模板（{{X}}）和ng模型將在您的代碼中競爭<td></td>的顯示值。

Answer 2

如果計算後端總

$ scope.CalculatedTotal =一定的價值;

這樣你就可以在最後一排撥打：

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

或存儲CalculatedTotal對象

currentCollection.Total = CalculatedTotal; 

類似的東西