在附加的代碼片段中,我想計算使用AngularJS的所有行的總金額。如何使用AngularJS從動態創建的HTML表中計算html表列的總和?
在此方面的快速協助將不勝感激。
<html ng-app="MyApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Add Rows</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script>
angular.module('MyApp', [])
.controller('MainController', ['$scope', '$http',
function ($scope, $http) {
$scope.rows = ['Row 1'];
$scope.counter = 3;
$scope.calculateTableSum = function (dQuantityIssued, dUnitPrice)
{
$scope.GrossTotal = dQuantityIssued * dUnitPrice;
}
//Adding Row
$scope.addRow = function() {
$scope.rows.push('Row ' + $scope.counter);
$scope.counter++;
}
//Removing Row
$scope.removeRow = function (rowIndex) {
$scope.rows.splice(rowIndex, 1);
}
} ]);
</script>
<a href="#" class="button" ng-click="addRow()">Add Row {{counter}}</a>
<table border="1">
<thead>
<tr>
<th>
</th>
<th>
Product
</th>
<th>
Description
</th>
<th>
Qty Issued
</th>
<th>
Unit Price
</th>
<th>
Gross Total
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(rowIndex,rowContent) in rows">
<td>
<input type="button" value="Remove" class="btn btn-primary" ng-click="removeRow(rowIndex)" />
</td>
<td>
<input type="text"></input>
</td>
<td>
<input type="text"></input>
</td>
<td>
<input ng-model="QtyIssued" type="number"/>
</td>
<td>
<input ng-model="UnitPrice" type="number" ng-change="calculateTableSum(QtyIssued,UnitPrice)" />
</td>
<td>
<input ng-model="GrossTotal" type="number" ng-bind="QtyIssued*UnitPrice" />
</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
<p>
Net Amount Total = {{NetAmount}}
</p>
請全部加在一個plkr或東西,所以我可以幫你 –