如何計算使用ng-repeat時的行總數？

Question

我正在嘗試使用AngularJS創建一個跟蹤器，並且在涉及到ng-repeat時我的邏輯有點麻煩。

這裏是我的表是什麼樣子，以幫助解釋我想要做的事：

那麼，文字的照片，應該是MTD1 = 5，MTD2 = 15，MTD3 = 18，等等。與total列相同（total列加起來爲actual列）。

有兩件事情，我需要確保仍然可以工作，而這樣做：

1）我想確保它更新的數字生活作爲用戶輸入新值。 2）我也想建立這樣的方式，它允許我在我的數據庫中進行更新（保持每行計算後的總數）。

這是到目前爲止我的代碼：

<tr ng-repeat="i in new() track by $index"> 
    <td>{{$index + 1}}</td> 
    <td> 
     <input type='text' ng-model="i.ctn_goal"> 
    </td> 
    <td> 
     <input type='text' ng-model="i.ctn_actual"> 
    </td> 
    <td>{{ }}</td> 
    <td>{{ }}</td> 
    <td> 
     <input type='text' ng-model="i.twi_actual"> 
    </td> 

    <td> 
     <input type='text' ng-model="i.acc_goal"> 
    </td> 
    <td> 
     <input type='text' ng-model="i.acc_actual"> 
    </td> 
    <td>{{ }}</td> 
    <td>{{ }}</td> 
    <td> 
     <input type='text' ng-model="i.acc_units"> 
    </td> 

    <td> 
     <input type='text' ng-model="i.mpp_goal"> 
    </td> 
    <td> 
     <input type='text' ng-model="i.mpp_actual"> 
    </td> 
    <td>{{ }}</td> 
    <td>{{ }}</td> 
</tr> 

而且我的控制器：

app.controller("tableCtrl", function ($scope, $http) { 
// Generate rows for each day of the month 
$scope.new = function() { 
     var x = new Date(); 
     var date = new Date(x.getYear(), x.getMonth()+1, 0).getDate(); 
     return new Array(date); 
    } 
}); 

我連着NG-模型的輸入假設我能在我的控制器訪問它們，但我認爲我對ng-repeat及其工作原理缺乏一些瞭解。

編輯：與{{ items[$index].ctn_goal + items[$index-1].ctn_goal }}爲CTN -> MTD列。

Answer 1

這是我發現做到這一點的最好辦法。如果您找到更好的方法，請隨時更新。

控制器：

// Get the number of days in the current month 
var x = new Date(); 
var date = new Date(x.getYear(), x.getMonth() + 1, 0).getDate(); 

$scope.update = function (items, file) { 
    $http({ 
     method: 'POST', 
     url: 'assets/php/' + file + '.php', 
     data: items, 
     params: { 
     id: $scope.user.user_id 
     }, 
     headers: { 
     'Content-Type': 'application/x-www-form-urlencoded' 
     } 
    }) 

    // Check and see if there's already a tracker started, if not, create a new tracker equal to the number days in the current month. 
    .then(function (response) { 
     if (response.data.status == 0 && file != "updateTracker") { 
     $scope.items = []; 
     for (var i = 0; i < date; i++) { 
      $scope.items[i] = { 
      ctn_goal: 0, ctn_actual: 0, ctn_mtd: 0, ctn_total: 0, twi_actual: 0, twi_mtd: 0, 
      acc_goal: 0, acc_actual: 0, acc_mtd: 0, acc_total: 0, acc_units: 0, units_mtd: 0, 
      mpp_goal: 0, mpp_actual: 0, mpp_mtd: 0, mpp_total: 0 
      } 
     } 
     } else if (file != "updateTracker") { 
     $scope.items = response.data; 
     } else if (response.data.status) { 
     alert("Save successful!"); 
     } else { 
     alert("No changes detected!"); 
     } 
    }); 
} 

// Loop through each object and create a running total for each property in each object. 
$scope.add = function (c_input, c_output, i) { 
    var j = 0; 
    var k = $scope.items.length; 
    var sum = 0; 
    if (!isNaN($scope.items[i][c_input])) { 
     while (j < k) { 
      sum += $scope.items[j][c_input]; 
      $scope.items[j][c_output] = sum; 
      j++; 
     } 
    } 
} 

Tracker.html

<form> 
    <div class="table-responsive text-center"> 
    <table class="table table-bordered table-striped"> 
     <thead> 
     <tr> 
      <th rowspan="2">Feb 2016 
      <br> 
      <button class="btn btn-success" ng-click="update(items, 'updateTracker')">Save</button> 
      </th> 
      <th colspan="5">CTN</th> 
      <th colspan="5">ACC</th> 
      <th colspan="4">MPP</th> 
     </tr> 

     <tr> 
      <td>Goal</td> 
      <td>Actual</td> 
      <td>MTD</td> 
      <td>Total</td> 
      <td>TWI</td> 

      <td>Goal</td> 
      <td>Actual</td> 
      <td>MTD</td> 
      <td>Total</td> 
      <td>Units</td> 

      <td>Goal</td> 
      <td>Actual</td> 
      <td>MTD</td> 
      <td>Total</td> 
     </tr> 
     </thead> 
     <tbody> 
     <tr ng-repeat="i in items track by $index" allow-pattern="[\d-]+"> 
      <td ng-model="i.date">{{$index + 1}}</td> 

      <!-- CTN --> 
      <td> 
      <input type='number' ng-model="i.ctn_goal" ng-change="add('ctn_goal', 'ctn_mtd', $index)"> 
      </td> 
      <td> 
      <input type='number' ng-model="i.ctn_actual" ng-change="add('ctn_actual', 'ctn_total', $index)"> 
      </td> 
      <td ng-model="i.ctn_mtd">{{ i.ctn_mtd }}</td> 
      <td ng-model="i.ctn_total">{{ i.ctn_total }}</td> 
      <td> 
      <input type='number' ng-model="i.twi_actual" ng-change="add('twi_actual', 'twi_mtd', $index)"> 
      </td> 

      <!-- ACC --> 
      <td> 
      <input type='number' ng-model="i.acc_goal" ng-change="add('acc_goal', 'acc_mtd', $index)"> 
      </td> 
      <td> 
      <input type='number' ng-model="i.acc_actual" ng-change="add('acc_actual', 'acc_total', $index)"> 
      </td> 
      <td ng-model="i.acc_mtd">{{ i.acc_mtd }}</td> 
      <td ng-model="i.acc_total">{{ i.acc_total }}</td> 
      <td> 
      <input type='number' ng-model="i.acc_units" ng-change="add('acc_units', 'units_mtd', $index)"> 
      </td> 

      <!-- MPP --> 
      <td> 
      <input type='number' ng-model="i.mpp_goal" ng-change="add('mpp_goal', 'mpp_mtd', $index)"> 
      </td> 
      <td> 
      <input type='number' ng-model="i.mpp_actual" ng-change="add('mpp_actual', 'mpp_total', $index)"> 
      </td> 
      <td ng-model="i.mpp_mtd">{{ i.mpp_mtd }}</td> 
      <td ng-model="i.mpp_total">{{ i.mpp_total }}</td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 
</form> 

Answer 2

在控制器中聲明瞭一個靜態數組這樣

// Generate rows for each day of the month 
$scope.items= [ 
    {ctn_goal:10, ctn_actual:25, twi_actual:11, acc_goal:10,acc_actual:10, acc_units:10, mpp_goal:10, mpp_actual:10 }, 
    {ctn_goal:10, ctn_actual:25, twi_actual:11, acc_goal:10,acc_actual:10, acc_units:10, mpp_goal:10, mpp_actual:10 }, 
    {ctn_goal:10, ctn_actual:25, twi_actual:11, acc_goal:10,acc_actual:10, acc_units:10, mpp_goal:10, mpp_actual:10 }, 
    {ctn_goal:10, ctn_actual:25, twi_actual:11, acc_goal:10,acc_actual:10, acc_units:10, mpp_goal:10, mpp_actual:10 }  
    ]; 

在HTML

// track by used only if you want to sort by any parameters 
<tr ng-repeat="i in items"> 
    //Put your code here 
    <td>{{ items[$index].ctn_goal + items[$index-1].ctn_goal }}</td> // i put it here as sample i don't know which you have to add 
</tr>