How to calculate row total when using ng-repeat?

Question

I'm trying to create a tracker using AngularJS and I'm having a bit of trouble with my logic when it comes to ng-repeat.

Here's what my table looks like to help explain what I'm trying to do:

So where the text is in the photo, it should be MTD1 = 5, MTD2 = 15, MTD3 = 18, etc. Same with the total column (total column adds up the actual column).

There's 2 things that I need to make sure will still work while doing this:

1) I want to make sure that it updates the numbers live as the user inputs new values.

2) I also want to build this in a way where it will allow me to update it in my database (keeping the totals after they've been calculated for each row).

This is my code so far:

<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>

And my controller:

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);
    }
});

I attached ng-model to the inputs assuming I could access them in my controller, but I think I'm lacking some understanding when it comes to ng-repeat and how it works.

EDIT: With {{ items[$index].ctn_goal + items[$index-1].ctn_goal }} for the CTN -> MTD column.

Answer 1

Here's the best way I found to do this. Feel free to update if you find a better way.

Controller:

// 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

In Your controller declare one static array like this

// 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 }    
  ];

In 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>