如何使用 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;
}

这应该给你总费用。