【问题标题】:How to calculate row total when using ng-repeat?使用 ng-repeat 时如何计算行总数?
【发布时间】:2016-02-17 07:09:10
【问题描述】:

我正在尝试使用 AngularJS 创建一个跟踪器,但在涉及 ng-repeat 时我的逻辑有点问题。

这是我的表格的样子,以帮助解释我正在尝试做的事情:

所以照片中的文字应该是MTD1 = 5MTD2 = 15MTD3 = 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 -&gt; MTD 列。

【问题讨论】:

  • 在您的 $scope.new = function () 中,与 ng-repeat 的对象 i 相关的所有参数在哪里。表示您在哪里传递值 i.ctn_goal 等等
  • 它们不存在。我不知道如何将它们传递给我的控制器或从我的控制器访问它们。我最初添加它们是因为我想自己在{{ }} 字段中做一些数学运算。前任。 {{ i[0].acc_actual + i[1].acc_actual }}.. 愚蠢,我知道。这就是我在这里的原因。

标签: javascript angularjs angularjs-scope angularjs-ng-repeat angular-ngmodel


【解决方案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>

【讨论】:

  • 我不相信这会起作用,因为每个月都有不同的天数。我想避免每月手动创建一个新数组。此外,要添加的值是目标 1 + n/a,然后在下一行是目标 2 + 目标 1,然后是目标 3 + 目标 2,因此它是每一行的运行总和。
  • @Bryner 检查更新的代码。它会为你工作。让我知道。
  • 我刚才试了一下,几乎可以用了。不过,它一次只添加 2 行。很难解释,但这里有一个fiddle。输入一些值并查看模式。
  • @Bryner:你能再检查一下小提琴吗?我更新了有效的数组值,你能解释一下究竟是什么问题。
  • 它在数字以 10 的值启动时起作用,但是当我将表中的值更改为 0 然后开始为目标输入 1、1、1、1 时,它开始再次搞砸。有没有办法先用 0 加载表格,然后在输入数字时进行数学运算?
【解决方案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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-05-08
    • 2023-03-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多