在 Angular 中输出第 3 列和第 5 列的总计差答案

【问题标题】：Output the difference of totals on columns 3 and 5 in Angular在 Angular 中输出第 3 列和第 5 列的总计差
【发布时间】：2019-07-22 17:50:21
【问题描述】：

有什么方法可以得到第 3 列和最后一列总数的差值？

<body ng-app="Test">
  <section style="margin-top:80px">

    <h3>Plastic Calculator Form Version 2.0</h3>

    <div ng-controller="TestController as test" >
      <p>To date, 
        <strong><u># of people who pledged</u></strong>
        Earthlings have pledged to reduce
           their single-use plastic waste from 
          <strong><u>{{ test.approve | sumByColumn: 'amount' }}</u>
          </strong> Items per year to <strong>
          <u>{{ test.approve | sumByColumn5: 'amount' }}</u>
        </strong>.
        That's a reduction of 
        <strong><u>{{ test.approve | sumByColumn4: 'reducedTotal' }}</u>
        </strong> per year!  Do your part.  Make a pledge!
      </p>

      <table class="table">
        <tr>
          <th>Single-Use Plastic Items</th>
          <th>Enter the Number You Use Per Week</th>
          <th>The Number You Use Per Year is:</th>
          <th>How Many Less Can You Use Per Week?</th>
          <th>Your Reduced Usage Per Year Would Be:</th>
        </tr>

        <tr ng-repeat="x in test.approve">
          <td> {{ x.name }} </td>
          <td> <input class="qty form-control" type="number"
                      ng-model="x.number" ng-change="sumByColumn3()" min="0"
                      restrict-to="[0-9]"/> 
          </td>
          <td ng-model="x.amount"> {{ x.number*x.amount }} </td>
          <td> <input class="qty form-control" type="number"
                      ng-model="x.reducedAmount" ng-change="sumByColumn2()"
                      min="0" restrict-to="[0-9]"/> 
          </td>
          <td ng-model="x.reducedTotal"> {{ x.reducedAmount*x.reducedTotal }}
          </td>
        </tr>
        <tr>
          <td>TOTALS</td>
          <td>{{ test.approve | sumByColumn3: 'number' }}</td>
          <td>{{ test.approve | sumByColumn: 'amount' }}</td>
          <td>{{ test.approve | sumByColumn2: 'reducedAmount' }}</td>
          <td>{{ test.approve | sumByColumn4: 'reducedTotal' }}</td>
        </tr>
      </table>

      <form>
        <div class="col-sm-4">
          <div class="form-group">
            <label for="full-name">Name</label>
            <input type="text" class="form-control" id="full-name" 
                   placeholder="Enter Full Name">
          </div>
        </div>
        <div class="col-sm-4">
          <div class="form-group">
            <label for="email-address">Email</label>
            <input type="email" class="form-control" id="email-address"
                   aria-describedby="emailHelp" placeholder="Enter email">
          </div>
        </div>
        <div class="col-sm-4">
          <button type="submit" class="btn btn-primary" style="margin-top:25px">
            Submit
          </button>
        </div>
      </form>
    </div>
  </section>

</body>

另外，当用户点击提交时，有没有办法让表单在第 3 列中累积总数？换句话说，在它说的句子中：

single-use plastic waste from 
<strong>
  <u>{{ test.approve | sumByColumn: 'amount' }}</u>
</strong> Items per year

每次用户填写表单时都会将总数相加。

这是完整代码 - https://codepen.io/tampham/pen/RzqLQV

至于获得差异，这是我到目前为止所尝试的。

filter('sumByColumn5', function () {
    return function (collection, column) {
      var total = 0;

      collection.forEach(function (item) {
        total += (item.amount-item.reducedTotal);
      });

      return total;
    };
})

任何建议都会有很大帮助，谢谢！

【问题讨论】：

ng-model 指令不适用于 <td> 元素。
哦，对了，我知道它什么也没做，我只是忘了删除它，谢谢提醒！

标签： javascript angularjs calculator

【解决方案1】：

您已经有以下行来计算第 3 列和第 5 列的总数

{{(test.approve | sumByColumn: 'amount') }} 
{{(test.approve | sumByColumn4: 'reducedTotal')}}

我认为最简单的解决方案是使用以下方法来区分这两者。

{{(test.approve | sumByColumn: 'amount') - (test.approve | sumByColumn4: 'reducedTotal')}}

Demo

【讨论】：

哇，太好了！我曾经有过这样的事情，但它没有用。是{{ test.approve | sumByColumn: 'amount' - sumByColumn4: 'reducedTmount' }} 我只是不知道如何正确包装它。谢谢大佬！
@Tam 很高兴能帮上忙。