CODEWITHSUNDEEP
javascriptangularjs
Tam
Tam

Reputation: 49

Get different total of the last column in AngularJS

I am trying to get the total of the last column, but for some reason, it grabs the same total of the 3rd column.

Is there a way to get the total of just the last column?

<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 poeple</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>reduced total</u></strong>. That's a reduction of <strong><u>items reduced</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 Year?</th>
          <th>Reduced total</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>
    </div>
  </section>

</body>

Here's the full code https://codepen.io/tampham/pen/RzqLQV

Upvotes: 0

Views: 60

Answers (1)

kshetline
kshetline

Reputation: 13672

In the sumByColumn4 filter, you need to change:

item[column]*item.number

to

item[column]*item.reducedAmount

And there's no need to call parseInt() there or in sumByColumn.

For the numbers to make sense, I also think you meant the column header that reads "How Many Less Can You Use Per Year?" to say "How Many Less Can You Use Per Week?" instead.

Upvotes: 1

Related Questions