AngularJS: Sum input values [duplicate]

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
– Saidi Meriem, Commented Apr 22, 2016 at 15:30

Cláudio Alves · Accepted Answer · 2016-04-22 15:49:37Z

1

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>

edited Apr 22, 2016 at 15:49

answered Apr 22, 2016 at 13:36

Cláudio Alves

7653 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Saidi Meriem Over a year ago

How can I assign this value to a variable in mycontroller ?

Cláudio Alves Over a year ago

I have updated the code. Now you have the total sum in the controller so you can use it to do whatever you want.

Saidi Meriem Over a year ago

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?

Collectives™ on Stack Overflow

AngularJS: Sum input values [duplicate]

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related