存储总数并在提交时累积

Question

您如何存储总数并在每次用户点击提交时将其累加？

例如，Cumulative Total = # 会在用户每次提交信息时将第 3 列的总数加起来。

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

    <h3>Plastic Calculator Form</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 | sumByColumn: 'amount') - (test.approve | sumByColumn4: 'reducedTotal')}}</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> {{ 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> {{ 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>
        <tr>
          <td colspan="2">Total difference = {{(test.approve | sumByColumn: 'amount') - (test.approve | sumByColumn4: 'reducedTotal')}}</td>
          <td colspan="3">
            <strong>Cumulative Total = #</strong>
          </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>

Link to Pen

我不确定最好用 window.localStorage 或 sessionStorage 还是用 PHP 做。我现在正在试验这个。

你的帮助将是千金。

Answer 1

I am not really sure if its best to do with window.localStorage or sessionStorage or perhaps do it with PHP. I'm experimenting with this now.

这个很简单。方法如下：

1.) 这些数字（总和）是否以某种方式与您的后端数据有关？您是否需要某种服务器代码或功能来执行此操作？如果是：使用php。

2.) 如果 1 对您来说是错误的，您是否希望您的用户再次回来时能够再次获得数字或总和？你想让它持久吗？然后使用：localStorage

3.) 如果 2 为假，则使用 sessionStorage。它不是持久的，一旦当前会话终止就会被清除。即：用户关闭标签页或浏览器。

现在，如果您需要一些代码方面的帮助，请修改您的问题以包含这些详细信息，或者打开一个新问题，或者只是 post 对我的这个答案发表评论。我会尽力帮助你。编码愉快！

存储总数并在提交时累积

Store the total and have it cumulate on submit

javascript

php

local-storage

cumulative-sum

angularjs