Pushing array data from a button to a table in Angular

Question

I have a list of buttons and each button has some data. The data represent payment costs of standard copays for a doctor's office copay $10, copay $20 etc. I am attempting to use this application like a cash register so that when the user clicks the copay button (from the left) or a button from the outstanding balance with the dollar amount, it will add it to a list of totals on the right within my table. The user may keep clicking copays and outstanding balances to add rows (that will be added together) in the table on the right. I have been able to add blank table rows to my totals table, but am unsure how to get the values from the button to the table. Thanks in advance.

angular
.module('myApp')
.controller('BillingCtrl', function($scope){
	

  $scope.payments= [
  {id:'1', paytype:'Copay', billing:'Epic', busunit:'Ohio Physicians', amount:10.00},
  {id:'2',paytype:'Copay', billing:'Epic', busunit:'Ohio Physicians', amount:20.00},
  {id:'3',paytype:'Copay', billing:'Epic', busunit:'Ohio Physicians', amount:35.00},
  {id:'4',paytype:'Copay', billing:'Epic', busunit:'Ohio Physicians', amount:75.00}

  ];

  $scope.outstanding=[
  {busunit:'Ohio Physicians', date:'Fri, 18 Dec 2009 20:28:37 GMT', amount:100.00},
  {busunit:'Ohio Physicians', date:'Wed, 06 Apr 2012 20:28:37 GMT', amount:100.00},

  ];

  $scope.totals=[''];
  $scope.addPayments= function (i) {
    if($scope.totals.indexOf(i)<=1){
      $scope.totals.push(i);
    }
  };




});

<div ng-controller="BillingCtrl">
<div class="container-fluid">
	<hr>
	<div class="row">
		<div class="col-md-5">
			<h4>Today's Payment</h4>
			<form role="form" ng-submit="addPayment()">
			<div class="list-group">
				<button type="submit" value="Submit"class="list-group-item">
					<div class="row vertical-align">
						<div class="col-sm-8">
							<p class="list-group-item-heading" ng-model="paytype">Copay</p>
						</div>
						<div class="col-sm-4">
							<form class="form-inline">
								<div class="form-group">
									<label class="sr-only" for="InputAmount">Amount (in dollars)</label>
									<div class="input-group">
										<div class="input-group-addon">$</div>
										<input type="text" class="form-control" id="InputAmount" placeholder="Amount" ng-model="amount">
									</div>
								</div>
							</form>
						</div>
					</div>
				</button>
				<button type="button" class="list-group-item" ng-repeat="payment in payments" ng-click="addPayments(selectedItem)"  ng-model="selectedItem">
					<div class="row vertical-align">
						<div class="col-sm-4">
							<p class="list-group-item-heading">{{payment.paytype}}</p>
						</div>
						<div class="col-sm-8">
							<p class="pull-right">${{payment.amount}}</p>
						</div>
					</div>
				</button>
		
				<button type="button" class="list-group-item">
					<div class="row vertical-align">
						<div class="col-sm-8">
							<p class="list-group-item-heading">Other</p>
						</div>
						<div class="col-sm-4">
							<span class="glyphicon glyphicon-chevron-right pull-right"></span>
						</div>
					</div>
				</button>
				
			</div>
			</form>
			<br>
		<h4>Outstanding Balances</h4>
		<div class="list-group">
			<button type="button" class="list-group-item" ng-repeat="balance in outstanding">
				<div class="row vertical-align">
					<div class="col-sm-8">
						<p class="list-group-item-heading">{{balance.busunit}}</p>

						<p class="list-group-item-text">{{balance.date}}</p>
					</div>
					<div class="col-sm-4">
						<p class="pull-right">${{balance.amount}}</p>
					</div>
				</div>
			</button>
		</div>
	</div>
		
	<div class="col-md-1"></div>
	<div class="col-md-6">
		<div class="row vertical-align">
			<div class="col-sm-6">
				<p><span class="fa fa-user"> <strong>Sally Perkins</strong></span> <span>12345678</span></p>
			</div>
			<div class="col-sm-6">
				<p class="pull-right">Dec 17, 2015</p>
			</div>
		</div>
		<table class="table table-default">
			<tr ng-repeat="total in totals track by $index">
				<td>{{total.paytype}}</td>
				<td>{{total.billing}}</td>
				<td>{{total.busunit}}</td>
				<td>{{total.amount}}</td>
			</tr>
			
	<hr>
	<button class="btn btn-primary btn-block">Charge $0.00</button>
</div><!--closeright-hand column-->
</div>
</div>
</div>

AWolf · Accepted Answer · 2015-12-18 23:07:27Z

I wouldn't use ng-submit. I would use ng-click at the buttons so you can pass the current object of ng-repeat that you can use inside of your addPayment method.

Also the currency filter is useful for displaying the amount values. Filters are used like this {{ number | currency }}. You can read more about it here.

Your markup is OK but hard to read during development of your app. I would recommend to keep the markup as simple as possible and improve styling later.

Please have a look at your updated code below or in this jsfiddle.

angular
  .module('myApp', [])
  .controller('BillingCtrl', function($scope) {


    $scope.payments = [{
        id: '1',
        paytype: 'Copay',
        billing: 'Epic',
        busunit: 'Ohio Physicians',
        amount: 10.00
      }, {
        id: '2',
        paytype: 'Copay',
        billing: 'Epic',
        busunit: 'Ohio Physicians',
        amount: 20.00
      }, {
        id: '3',
        paytype: 'Copay',
        billing: 'Epic',
        busunit: 'Ohio Physicians',
        amount: 35.00
      }, {
        id: '4',
        paytype: 'Copay',
        billing: 'Epic',
        busunit: 'Ohio Physicians',
        amount: 75.00
      }

    ];

    $scope.outstanding = [{
        busunit: 'Ohio Physicians',
        date: 'Fri, 18 Dec 2009 20:28:37 GMT',
        amount: 100.00
      }, {
        busunit: 'Ohio Physicians',
        date: 'Wed, 06 Apr 2012 20:28:37 GMT',
        amount: 100.00
      },

    ];

    $scope.totals = [];
    $scope.total = 0;
    
    var calcTotal = function() {
    	var sum = 0;
    	angular.forEach($scope.totals, function(total) {
      	sum += total.amount;
      });
      return sum;
    }
    
    $scope.addPayments = function(payment) {
      //if ($scope.totals.indexOf(i) <= 1) {
        $scope.totals.push(payment);
        $scope.total = calcTotal();
        //console.log(payment, $scope.total);
      //}
    };




  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="BillingCtrl" ng-app="myApp">
  <div class="container-fluid">
    <hr>
    <div class="row">
      <div class="col-md-5">
        <h4>Today's Payment</h4>
        <form role="form">
          <div class="list-group">
            <button type="submit" value="Submit" class="list-group-item">
              <div class="row vertical-align">
                <div class="col-sm-8">
                  <p class="list-group-item-heading" ng-model="paytype">Copay</p>
                </div>
                <div class="col-sm-4">
                  <form class="form-inline">
                    <div class="form-group">
                      <label class="sr-only" for="InputAmount">Amount (in dollars)</label>
                      <div class="input-group">
                        <div class="input-group-addon">$</div>
                        <input type="text" class="form-control" id="InputAmount" placeholder="Amount" ng-model="amount">
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </button>
            <button type="button" class="list-group-item" ng-repeat="payment in payments" ng-click="addPayments(payment)">
            <!-- ng-model="selectedItem"> -->
              <div class="row vertical-align">
                <div class="col-sm-4">
                  <p class="list-group-item-heading">{{payment.paytype}}</p>
                </div>
                <div class="col-sm-8">
                  <p class="pull-right">${{payment.amount}}</p>
                </div>
              </div>
            </button>

            <button type="button" class="list-group-item">
              <div class="row vertical-align">
                <div class="col-sm-8">
                  <p class="list-group-item-heading">Other</p>
                </div>
                <div class="col-sm-4">
                  <span class="glyphicon glyphicon-chevron-right pull-right"></span>
                </div>
              </div>
            </button>

          </div>
        </form>
        <br>
        <h4>Outstanding Balances</h4>
        <div class="list-group">
          <button type="button" class="list-group-item" ng-repeat="balance in outstanding" ng-click="addPayments(balance)">
            <div class="row vertical-align">
              <div class="col-sm-8">
                <p class="list-group-item-heading">{{balance.busunit}}</p>

                <p class="list-group-item-text">{{balance.date}}</p>
              </div>
              <div class="col-sm-4">
                <p class="pull-right">${{balance.amount}}</p>
              </div>
            </div>
          </button>
        </div>
      </div>

      <div class="col-md-1"></div>
      <div class="col-md-6">
        <div class="row vertical-align">
          <div class="col-sm-6">
            <p><span class="fa fa-user"> <strong>Sally Perkins</strong></span> <span>12345678</span></p>
          </div>
          <div class="col-sm-6">
            <p class="pull-right">Dec 17, 2015</p>
          </div>
        </div>
        <p>
        {{total | currency }}
        </p>
        <table class="table table-default">
          <tr ng-repeat="total in totals track by $index">
            <td>{{total.paytype}}</td>
            <td>{{total.billing}}</td>
            <td>{{total.busunit}}</td>
            <td>{{total.amount | currency }}</td>
          </tr>

          <hr>
          <button class="btn btn-primary btn-block">Charge $0.00</button>
      </div>
      <!--closeright-hand column-->
    </div>
  </div>
</div>

Thank you so much! This works great! Thanks especially for markup tips, I agree, it was very difficult wading through all the markup, while trying to figure out functionality logistics. It will definitely be more beneficial to focus on the functionality first as opposed to design.
How would I go about actually making this into a service so that I could take the total I calculated, along with the list of charges and show it in another view?
Please have a look at this fiddle version. I've added the service code.
You can find an improved version here (with-out eventing stuff). I'm now using two-way binding. The problem before was that angular isn't doing two-way binding for primitive values. I've wraped the total into an object and it works now.
Great! so I don't have to put the service in a different js file?

Collectives™ on Stack Overflow

Pushing array data from a button to a table in Angular

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related