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-model附加到输入上，假设我可以在我的控制器中访问它们，但我认为在ng-repeat及其工作原理方面我缺乏一些了解。

编辑： {{ items[$index].ctn_goal + items[$index-1].ctn_goal }}列CTN -> MTD。

Answer 1

在你的控制器中声明一个这样的静态数组

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

Answer 2

这是我发现这样做的最好方法。如果您找到更好的方法，请随时更新。

<强>控制器：

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

使用ng-repeat时如何计算行总数？

2 个答案: