如何将用户输入字段与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;
   };

	$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">
	<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;
}

这应该会给你你的总开支。