如何將用戶輸入字段與angularjs相加

Question

我有一個非常簡單的應用程序，需要用戶輸入將計算淨收入的信息。然後我建立了另一個表格，用戶將輸入他們的費用信息。他們有一個備忘錄字段和一個金額字段。然後，我想用淨收入總額來顯示餘額。當涉及到添加用戶作爲輸入的費用時，我被卡住了。下面是代碼我到目前爲止...

scotchApp.controller('incomeController', function($scope) { 
 
    
 
    /*generate reciept button*/ 
 
      $scope.payTable=false; 
 
      $scope.genRec=true; 
 
     $scope.showRec= function() { 
 
      $scope.payTable=!$scope.payTable; 
 
      $scope.genRec=!$scope.genRec; 
 
     }; 
 
    
 
    
 
$scope.total = function() { 
 
    return $scope.pay * $scope.hours; 
 
    }; 
 

 
\t $scope.taxTotal = function() { 
 
    return $scope.total() * $scope.tax; 
 
    }; 
 
     
 
    $scope.afterTaxTotal = function() { 
 
     return $scope.total() - $scope.taxTotal(); 
 
    }; 
 
    
 
    $scope.netIncome= function() { 
 
     return $scope.afterTaxTotal() - $scope.expenseAmount 
 
    }; 
 

 
    
 
/*paycheck button*/ 
 
     $scope.showPay=true; 
 
     $scope.payInput=true; 
 
     $scope.addPay= function() { 
 
      $scope.showPay=!$scope.showPay; 
 
      $scope.payInput=!$scope.payInput; 
 
     }; 
 
     
 
     
 
/*expenses button*/ 
 
    
 
     $scope.expenses=[] 
 
    $scope.addExpense=function() { 
 
     $scope.expenses.push({expenseMemo: ' ', expenseAmount:''}); 
 
    }; 
 
    
 
    
 
    
 
    
 
    
 
    /*vairables */     
 
    $scope.pay; 
 
    $scope.hours; 
 
    $scope.tax; 
 
    
 

 

 

 
      
 
     
 

 
});

<!-----heading---> 
 
<div class="banner"> 
 
\t <h1>Income/Expense Calculator</h1> 
 

 

 
</div> 
 
<div ng-show="genRec"> 
 
<!--heading--> 
 
<h2> Insert the appropriate values to generate your financial receipt!</h2> 
 

 

 

 
<!--SHOW FORMS--> 
 

 

 
     
 
<form name="paycheckForm" > 
 
    <h3>Paycheck</h3> 
 
    
 
    <p ng-hide="showPay"> 
 
      Pay Rate:{{pay}}<br/> 
 
      Hours Worked: {{hours}} <br/> 
 
      Tax Rate: {{tax}} <br/> <br/> 
 
     <strong>Net Income {{afterTaxTotal() | currency : $ }}</strong> 
 
    </p> 
 
    
 
    <p ng-show="payInput"> 
 
     Pay Rate: <input type="number" ng-model="pay" placeholder='e.g. 15'/> 
 
     <br><br> 
 
     Hours worked: <input type="number" ng-model="hours" placeholder='e.g. 40'> 
 
     <br><br> 
 
     tax rate(as a decimal): <input type="number" step="0.01" ng-model="tax" placeholder='e.g. 0.1925'> 
 
     <br><br> 
 

 
     <button class="button" ng-click="addPay()" > Add Paycheck</button> 
 
    </p> 
 
    
 
</form> 
 
     
 
     
 
     
 
     
 
<br/><br/> 
 
<form name="Expenses"> 
 
<h3>Expenses</h3> 
 
    <div ng-repeat="item in expenses"> 
 
     Memo:<input type="text" ng-model="item.expenseMemo" placeholder='e.g. Groceries'/> 
 
     Amount: <input type=number ng-model="item.expenseAmount" placeholder="e.g. 100"/> 
 
     </div> 
 
     <button class="button" ng-click="addExpense()"> Add another expense</button> 
 
     <br><br><br> 
 
    </form> 
 

 
</div> 
 
    <button class="button button1" ng-click="showRec()"> Generate Receipt</button> 
 
    
 
    
 
    
 
<!--HIDE FORMS--> 
 

 

 

 
<!--RECEIPT--> 
 
<div ng-show="payTable"> 
 
    
 
    <strong>Paycheck total</strong><br/> 
 
    <table class="incomeTable"> 
 
     <th> 
 
     </th> 
 
     <th></th> 
 
     <tr> 
 
      <td>Subtotal:</td> 
 
      <td>{{ total() | currency : $ }}</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Total Taxes :</td> 
 
      <td>{{ taxTotal() | currency : $ }}</td> 
 
     </tr> 
 
     <tr> 
 
      <td> Net Income: </td> 
 
      <td>{{afterTaxTotal() | currency : $ }}</td> 
 
     </tr> 
 
    </table> 
 
    <br/><br/><br/> 
 
    
 
    <strong>Expenses </strong> <br/> 
 
     <table class="incomeTable"> 
 
      <th>Memo</th> 
 
      <th>Amount</th> 
 
      <tr ng-repeat="item in expenses"> 
 
       <td> {{item.expenseMemo}}</td> 
 
       <td> {{item.expenseAmount | currency}}</td> 
 
      </tr> 
 
     </table> 
 

 
     <br/><br/><br/> 
 

 

 
    <strong>Remaining Balance</strong> {{netIncome()}} 
 
    
 
</div>

Answer 1

您的費用陣列的位置：

$scope.expenses=[] 

我們可以遍歷並把它們加起來，例如;

$scope.totalExpenses = function(){ 
var total = 0; 
for(var i = 0; i < $scope.expenses.length; i++){ 
    //make sure input is a number 
    var amount = parseFloat($scope.expenses[i].expenseAmount); 
    //if it is a number add it to total 
    if(!isNaN(amount)){ 
    total += amount; 
    } 
} 
return total; 
} 

或者使用一些方便的角度功能

$scope.totalExpenses = function(){ 
var total= 0; 
angular.forEach($scope.expenses[i], function(value, index){ 
if (angular.isNumber(value.expenseAmount)) 
total += value.expenseAmount; 
}); 
return total; 
} 

，並應給你的總支出。