AngularJS：總和輸入值

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> 
 
    \t \t \t </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> 
 
    \t \t \t </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> 
 
    \t \t \t </div> 
 
      </div> 
 
      </div></div>

新的變量是我想要顯示它的價值標籤。

Answer 1

編輯：

可以總結添加ng-model每個輸入字段中的值。總和顯示在輸入下，並且該值在控制器中分配給$scope.total，以便以後使用。

var app = angular.module('app', []); 
 
    app.controller('myCtrl', function($scope) { 
 
    \t $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>