AngularJS：Sum输入值

Question

我有输入数字，我怎么能加总它的值？并且结果将受到影响，最终将保存到我的数据库中。

这是我的意见：

<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>

新变量是我想要显示其值的标签。

Answer 1

修改

您可以将每个输入字段添加ng-model的值相加。总和显示在输入下，该值分配给控制器中的$scope.total，以便您可以在之后使用它。

  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>