ユーザー入力フィールドを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; 
} 

を使用してそして、それはあなたの総費用を与える必要があります。