AngularJS: Sum input values

Question

I have inputs that are numbers how can I sum its values ? and the result will be affected into a new variable that finally will be saved into my data base.

here's my inputs :

<div class="panel panel-primary">
            <div class="panel-heading">Revenus mensuels</div>
          <div class="panel panel-body">
              <div class="form-group col-md-8">
            <label class="control-label col-md-6"> Revenus nets</label>
            <div class="input-group">
            <input id="ch1"  type="number" required="required" class="form-control"  placeholder="Charges de residence" aria-describedby="basic-addon2" /> 
            <span class="input-group-addon" >€</span>
     </div>
          </div>
          
          <div class="form-group col-md-8">
            <label class="control-label col-md-6">Allocation familiale</label>
            <div class="input-group">
            <input id="ch1"  type="number" required="required" class="form-control"  placeholder="Charges de residence" aria-describedby="basic-addon2" /> 
            <span class="input-group-addon" >€</span>
     </div>
          </div>
          
          <div class="form-group col-md-8">
            <label class="control-label col-md-6">Autres apports</label>
            <div class="input-group">
            <input id="ch1"  type="number" required="required" class="form-control"  placeholder="Charges de residence" aria-describedby="basic-addon2" /> 
            <span class="input-group-addon" >€</span>
     </div>
          </div>
          </div></div>

the new variable is a label that i want to display its value.

I want that the total, be added in my database when I submit the form. Not just to display it. — Saidi Meriem, Apr 22 '16 at 15:30

Cláudio Alves · Answer 1 · 2016-04-22T15:49:37.230

Edit:

You can sum the values adding a ng-model to each input field. The total sum is displayed under the inputs and this value is assigned to $scope.total in the controller so you can use it afterwards.

  var app = angular.module('app', []);
  app.controller('myCtrl', function($scope) {
   $scope.total = 0;
    $scope.revenus = 0;
    $scope.allocation = 0;
    $scope.autres = 0;
    
    $scope.calculateTotal = function() {
      $scope.total = $scope.revenus + $scope.allocation + $scope.autres;
      console.log("total is: ", $scope.total);
    }

  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="myCtrl" class="panel panel-primary">
    <div class="panel-heading">Revenus mensuels</div>
    <div class="panel panel-body">
      <div class="form-group col-md-8">
        <label class="control-label col-md-6">Revenus nets</label>
        <div class="input-group">
          <input id="ch1" ng-change="calculateTotal()" type="number" required="required" class="form-control" placeholder="Charges de residence" ng-model="revenus" aria-describedby="basic-addon2" />
          <span class="input-group-addon">€</span>
        </div>
      </div>

      <div class="form-group col-md-8">
        <label class="control-label col-md-6">Allocation familiale</label>
        <div class="input-group">
          <input id="ch1" type="number" ng-change="calculateTotal()" required="required" class="form-control" placeholder="Charges de residence" ng-model="allocation" aria-describedby="basic-addon2" />
          <span class="input-group-addon">€</span>
        </div>
      </div>

      <div class="form-group col-md-8">
        <label class="control-label col-md-6">Autres apports</label>
        <div class="input-group">
          <input id="ch1" type="number" ng-change="calculateTotal()" required="required" class="form-control" placeholder="Charges de residence" ng-model="autres" aria-describedby="basic-addon2" />
          <span class="input-group-addon">€</span>
        </div>
      </div>
      <p>Total (Revenus nets + Allocation familiale + Autres apports): {{total}}</p>
    </div>
  </div>
</div>

I have updated the code. Now you have the total sum in the controller so you can use it to do whatever you want. — Cláudio Alves, Apr 22 '16 at 15:51
now my issue is that how can I, in the same time, add the total and other input values in my entity ? cause when I try to save, i get only the inputs in the data base, but not the total ? how can I bind the two? — Saidi Meriem, Apr 22 '16 at 17:30

AngularJS: Sum input values

1 Answers1