Get the sum of a number when a new object is added

8 views

Skip to first unread message

Robert Thomas

unread,

Apr 24, 2017, 5:18:48 AM4/24/17

to Angular and AngularJS discussion

Hey Guys,

I'm working on a demo app that let's a user add their budget to a list, I got everything working fine. The problem that I'm having is, let's say I have a budget of $10,000 and every time a new object is added the Actual Expenses is subtracted from the $10,000 budget.

angular.module('LumpSumApp', [])
  .controller('LumpSumController', function() {
    var lumpSumList = this;

    lumpSumList.lumpsums = [];

    lumpSumList.addLumpSum = function() {

      var lumpsum = {
        lumpSumType: lumpSumList.lumpSumType,
        lumpSumCategory: lumpSumList.lumpSumCategory,
        lumpSumEstimate: lumpSumList.lumpSumEstimate,
        lumpSumExpenses: lumpSumList.lumpSumExpenses
      };

      lumpSumList.lumpsums.push(lumpsum);

      lumpSumList.lumpSumType = '';
      lumpSumList.lumpSumCategory = '';
      lumpSumList.lumpSumEstimate = '';
      lumpSumList.lumpSumExpenses = '';
    };

  });

<body ng-controller="LumpSumController as lumpSumList">
  <form class="form-inline" ng-submit="lumpSumList.addLumpSum()">
    <div class="form-group">
      <select class="form-control" ng-model="lumpSumList.lumpSumType">
        <option value=''>Select a Type</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div>
    <div class="form-group">
      <select class="form-control" ng-model="lumpSumList.lumpSumCategory">
        <option value=''>Select a Category</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>
    </div>
    <div class="form-group">
      <input class="form-control" type="text" ng-model="lumpSumList.lumpSumEstimate" size="40" placeholder="Estimated Expenses">
    </div>
    <div class="form-group">
      <input class="form-control" type="text" ng-model="lumpSumList.lumpSumExpenses" size="40" placeholder="Actual Expenses">
    </div>
    <div class="form-group">
      <label class="btn btn-primary">
        <i class="fa fa-file-text-o" aria-hidden="true"></i>
        <input type="file" ng-model="lumpSumList.lumpSumQuote" style="display: none;">
      </label>
    </div>
    <div class="form-group">
      <label class="btn btn-primary">
        <i class="fa fa-file-text-o" aria-hidden="true"></i>
        <input type="file" ng-model="lumpSumList.lumpSumReceipt" style="display: none;">
      </label>
    </div>
    <input class="btn btn-primary" type="submit" value="add">
  </form>


  <div class="table-responsive">
    <table class="table">
      <thead>
        <tr>
          <th>Expense Type</th>
          <th>Expense Category</th>
          <th>Estimated Expenses</th>
          <th>Actual Expenses</th>
          <th>Upload Quote(s)</th>
          <th>Upload Receipt(s)</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="lumpsum in lumpSumList.lumpsums">
          <td>{{lumpsum.lumpSumType}}</td>
          <td>{{lumpsum.lumpSumCategory}}</td>
          <td>{{lumpsum.lumpSumEstimate}}</td>
          <td>{{lumpsum.lumpSumExpenses}}</td>
          <td>{{lumpsum.lumpSumQuote}}</td>
          <td>{{lumpsum.lumpSumReceipt}}</td>
        </tr>
      </tbody>
    </table>
  </div>

</body>

</html>

Sander Elias

unread,

Apr 24, 2017, 10:21:05 AM4/24/17

to Angular and AngularJS discussion

Hi Robert,

I'm not sure what your question is, can you provide a plunk and some more detail, that way it becomes a lot easier to help you.

Regards

Sander

Reply all

Reply to author

Forward

0 new messages