我尝试根据复选框选择计算已检查的总金额，如果选中复选框，则应添加总值。我在下面添加了截图，因为我已经解释清楚了，请仔细阅读。在我的主要项目中发生的事情是“检查总数”＃39;如果我在其他表格中点击，则显示在每个子表格中，所有表格的已检查总数将会改变，但是您想要显示单个表格检查总数。
怎么做到这一点，我已经上传了代码
var app = angular.module('MyApp', [])
app.controller('MyController', function($scope) {
$scope.Customers = [{
CustomerId: 1,
Name: "Prashant Olekar",
Country: "United States",
Orders: [{
OrderId: 10248,
Freight: 32.38,
amount: 10000,
ShipCountry: 'France'
},
{
OrderId: 10249,
Freight: 12.43,
amount: 10000,
ShipCountry: 'Japan'
},
{
OrderId: 10250,
Freight: 66.35,
amount: 10000,
ShipCountry: 'Russia'
}
]
},
{
CustomerId: 2,
Name: "Hemant K",
Country: "India",
Orders: [{
OrderId: 10266,
Freight: 77.0,
amount: 10000,
ShipCountry: 'Argentina'
},
{
OrderId: 10267,
Freight: 101.12,
amount: 10000,
ShipCountry: 'Australia'
},
{
OrderId: 10268,
Freight: 11.61,
amount: 10000,
ShipCountry: 'Germany'
}
]
},
{
CustomerId: 3,
Name: "Richard",
Country: "France",
Orders: [{
OrderId: 10250,
Freight: 65.83,
amount: 10000,
ShipCountry: 'Brazil'
}]
},
{
CustomerId: 4,
Name: "Robert Schidner",
Country: "Russia",
Orders: [{
OrderId: 10233,
Freight: 89.11,
amount: 10000,
ShipCountry: 'Belgium',
},
{
OrderId: 10234,
Freight: 51.30,
amount: 10000,
ShipCountry: 'Canada'
},
{
OrderId: 10235,
Freight: 46.11,
amount: 10000,
ShipCountry: 'Austria'
}
]
}
];
$scope.innertotalvalue = function (itemOrder) {
if (itemOrder != undefined) {
var innertotalvalue = 0;
for (j = 0; j < itemOrder.Orders.length; j++) {
if (itemOrder.Orders[j].amount != 0) {
innertotalvalue = innertotalvalue + itemOrder.Orders[j].amount;
}
}
}
return innertotalvalue;
}
$scope.chkselect_onchange = function(c, item) {
var totalvalue = 0;
var ordercount = 0;
var customercount = 0;
angular.forEach(c, function(cust) {
angular.forEach(cust.Orders, function(order) {
if (cust.select == true) {
if (order.amount != 0) {
order.select = true;
} else {
order.select = false;
}
} else {
order.select = false;
}
})
})
}
});<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div ng-app="MyApp" ng-controller="MyController">
<div class="container" style="margin-top:40px;">
<div class="row">
<div class="col-md-12">
<table class="table table-condensed table-bordered table-hover">
<thead>
<tr>
<td></td>
<th>Customer Id</th>
<th>Name</th>
<th>Country</th>
<th>Orders</th>
</tr>
</thead>
<tbody ng-repeat="c in Customers">
<tr>
<td>
<input id="mainCheck" type="checkbox" ng-change="chkselect_onchange(Customers,c)" ng-model="c.select" /></td>
<td>{{c.CustomerId}}</td>
<td>{{c.Name}}</td>
<td>{{c.Country}}</td>
<td>
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th></th>
<th>Order Id</th>
<th>Freight</th>
<th>ShipCountry</th>
<th>Amount</th>
</tr>
</thead>
<tbody ng-repeat="o in c.Orders">
<tr>
<td>
<input id="subCheck" type="checkbox" ng-change="chklotselect_onchange(Customers)" ng-model="o.select" /></td>
<td>{{o.OrderId}}</td>
<td>{{o.Freight}}</td>
<td>{{o.ShipCountry}}</td>
<td>{{o.amount}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Checked Total:______</td>
<td></td>
<td colspan="2"><span class="pull-right">Total:{{innertotalvalue(c)}}</span> </td>
</tr>
</tfoot>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
答案 0 :(得分：2)
您必须向$scope添加自定义方法才能为您进行求和。
$scope.customerTotal = function (customer) {
var sum = 0;
customer.Orders.forEach(function (order) {
sum += order.amount;
});
return sum;
}
$scope.customerCheckedTotal = function (customer) {
var sum = 0;
customer.Orders.forEach(function (order) {
if (order.select) sum += order.amount;
});
return sum;
}
工作代码段
var app = angular.module('MyApp', [])
app.controller('MyController', function($scope) {
$scope.Customers = [{
CustomerId: 1,
Name: "Prashant Olekar",
Country: "United States",
Orders: [{
OrderId: 10248,
Freight: 32.38,
amount: 10000,
ShipCountry: 'France'
},
{
OrderId: 10249,
Freight: 12.43,
amount: 10000,
ShipCountry: 'Japan'
},
{
OrderId: 10250,
Freight: 66.35,
amount: 10000,
ShipCountry: 'Russia'
}
]
},
{
CustomerId: 2,
Name: "Hemant K",
Country: "India",
Orders: [{
OrderId: 10266,
Freight: 77.0,
amount: 10000,
ShipCountry: 'Argentina'
},
{
OrderId: 10267,
Freight: 101.12,
amount: 10000,
ShipCountry: 'Australia'
},
{
OrderId: 10268,
Freight: 11.61,
amount: 10000,
ShipCountry: 'Germany'
}
]
},
{
CustomerId: 3,
Name: "Richard",
Country: "France",
Orders: [{
OrderId: 10250,
Freight: 65.83,
amount: 10000,
ShipCountry: 'Brazil'
}]
},
{
CustomerId: 4,
Name: "Robert Schidner",
Country: "Russia",
Orders: [{
OrderId: 10233,
Freight: 89.11,
amount: 10000,
ShipCountry: 'Belgium',
},
{
OrderId: 10234,
Freight: 51.30,
amount: 10000,
ShipCountry: 'Canada'
},
{
OrderId: 10235,
Freight: 46.11,
amount: 10000,
ShipCountry: 'Austria'
}
]
}
];
var totalvalue = 0;
var ordercount = 0;
var customercount = 0;
angular.forEach($scope.Customers, function(cust) {
angular.forEach(cust.Orders, function(order) {
if (order.amount != 0) {
ordercount++;
totalvalue = totalvalue + order.amount;
}
})
})
$scope.total = totalvalue;
$scope.customerTotal = function(customer) {
var sum = 0;
customer.Orders.forEach(function(order) {
sum += order.amount;
});
return sum;
}
$scope.customerCheckedTotal = function(customer) {
var sum = 0;
customer.Orders.forEach(function(order) {
if (order.select) sum += order.amount;
});
return sum;
}
$scope.chkselect_onchange = function(c, item) {
var totalvalue = 0;
var ordercount = 0;
var customercount = 0;
console.log(1);
angular.forEach(c, function(cust) {
angular.forEach(cust.Orders, function(order) {
if (cust.select == true) {
if (order.amount != 0) {
order.select = true;
} else {
order.select = false;
}
} else {
order.select = false;
}
})
})
}
});<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div ng-app="MyApp" ng-controller="MyController">
<div class="container" style="margin-top:40px;">
<div class="row">
<div class="col-md-12">
<table class="table table-condensed table-bordered table-hover">
<thead>
<tr>
<td></td>
<th>Customer Id</th>
<th>Name</th>
<th>Country</th>
<th>Orders</th>
</tr>
</thead>
<tbody ng-repeat="c in Customers">
<tr>
<td>
<input id="mainCheck" type="checkbox" ng-change="chkselect_onchange(Customers,c)" ng-model="c.select" /></td>
<td>{{c.CustomerId}}</td>
<td>{{c.Name}}</td>
<td>{{c.Country}}</td>
<td>
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th></th>
<th>Order Id</th>
<th>Freight</th>
<th>ShipCountry</th>
<th>Amount</th>
</tr>
</thead>
<tbody ng-repeat="o in c.Orders">
<tr>
<td>
<input id="subCheck" type="checkbox" ng-change="chklotselect_onchange(Customers)" ng-model="o.select" /></td>
<td>{{o.OrderId}}</td>
<td>{{o.Freight}}</td>
<td>{{o.ShipCountry}}</td>
<td>{{o.amount}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Checked Total: {{customerCheckedTotal(c)}}</td>
<td></td>
<td colspan="2"><span class="pull-right">Total:{{customerTotal(c)}}</span> </td>
</tr>
</tfoot>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>