我有3个表，它们相互嵌套，它们是Inventarios-> Localizacoes-> Etiquetas
我需要为已经完成的Etiquetas添加复选框列
<table class="table table-sm dataTable text-center bg-white border border-dark">
<thead class="thead-dark">
<tr>
<th class="col-xd-2" style="background-color: #526e90; color: white;">Localizações
</th>
<th ng-click="sort('InventarioID')" class="col-xd-1" style="background-color: #526e90; color: white;">Inventário
<span class="glyphicon sort-icon" ng-show="sortKey=='InventarioID'" ng-class="{'glyphicon-chevron-up':reverse, 'glyphicon-chevron-down':reverse}"></span>
</th>
<th ng-click="sort('Colaborador')" class="col-xd-2" style="background-color: #526e90; color: white;">Operador
<span class="glyphicon sort-icon" ng-show="sortKey=='Colaborador'" ng-class="{'glyphicon-chevron-up':reverse, 'glyphicon-chevron-down':reverse}"></span>
</th>
<th ng-click="sort('Armazem')" class="col-xd-2" style="background-color: #526e90; color: white;">Armazém
<span class="glyphicon sort-icon" ng-show="sortKey=='Armazem'" ng-class="{'glyphicon-chevron-up':reverse, 'glyphicon-chevron-down':reverse}"></span>
</th>
<th ng-click="sort('Estado')" class="col-xd-1" style="background-color: #526e90; color: white;">Estado
<span class="glyphicon sort-icon" ng-show="sortKey=='Estado'" ng-class="{'glyphicon-chevron-up':reverse, 'glyphicon-chevron-down':reverse}"></span>
</th>
<th ng-click="sort('Total')" class="col-xd-1" style="background-color: #526e90; color: white;">Total
<span class="glyphicon sort-icon" ng-show="sortKey=='Total'" ng-class="{'glyphicon-chevron-up':reverse, 'glyphicon-chevron-down':reverse}"></span>
</th>
<th ng-click="sort('Data')" class="col-xd-2" style="background-color: #526e90; color: white;">Data
<span class="glyphicon sort-icon" ng-show="sortKey=='Data'" ng-class="{'glyphicon-chevron-up':reverse, 'glyphicon-chevron-down':reverse}"></span>
</th>
<th class="col-xd-1" style="background-color: #526e90; color: white;">Exportar</th>
</tr>
</thead>
<tbody>
<tr ng-if="showLoader" class="jumbotron">
<td colspan="8">
<!-- so this div containing img will be dislpayed only when the showLoader is equal to true-->
<div class="row">
<div class="col-md-12">
<div class="p-4">
<strong style="color: #526e90">A carregar dados...</strong>
<p></p>
<div class="lds-hourglass">
</div>
</div>
</div>
</div>
<!-- or any other spinner -->
</td>
</tr>
<tr ng-repeat-start="i in inventarios | filter : paginate | filter:searchData:'Colaborador' | orderBy:sortKey:reverse">
<td ng-if="$odd" style="background-color: #ecf4fe">
<img src="../../Images/collapse.png" width="25" class="button button-light" ng-if="i.expanded" ng-click="i.expanded = false" style="cursor: pointer;" />
<img src="../../Images/expand.png" width="25" class="button button-light" ng-if="!i.expanded" ng-click="i.expanded = true" style="cursor: pointer;" />
</td>
<td ng-if="$even">
<img src="../../Images/collapse.png" width="25" class="button button-light" ng-if="i.expanded" ng-click="i.expanded = false" style="cursor: pointer;" />
<img src="../../Images/expand.png" width="25" class="button button-light" ng-if="!i.expanded" ng-click="i.expanded = true" style="cursor: pointer;" />
</td>
<td ng-if="$odd" style="background-color: #ecf4fe">{{ i.InventarioID }}</td>
<td ng-if="$even">{{ i.InventarioID }} </td>
<td ng-if="$odd" style="background-color: #ecf4fe">{{ i.Colaborador }}</td>
<td ng-if="$even">{{ i.Colaborador }} </td>
<td ng-if="$odd" style="background-color: #ecf4fe">{{ i.Armazem }}</td>
<td ng-if="$even">{{ i.Armazem }} </td>
<td ng-if="$odd" style="background-color: #ecf4fe">
<div ng-class="{ 'badge badge-success' : i.Estado, 'badge badge-danger' : !i.Estado }">{{ i.Estado ? 'Aberto' : 'Fechado' }}</div>
</td>
<td ng-if="$even">
<div ng-class="{ 'badge badge-success' : i.Estado, 'badge badge-danger' : !i.Estado }">{{ i.Estado ? 'Aberto' : 'Fechado' }}</div>
</td>
<td ng-if="$odd" style="background-color: #ecf4fe"></td>
<td ng-if="$even"></td>
<td ng-if="$odd" style="background-color: #ecf4fe">{{ i.Data | date:"dd-MM-yyyy"}}</td>
<td ng-if="$even">{{ i.Data | date:"dd-MM-yyyy"}} </td>
<td ng-if="$odd" style="background-color: #ecf4fe"></td>
<td ng-if="$even"></td>
</tr>
<tr ng-if="i.expanded" ng-repeat-end>
<td></td>
<td colspan="7">
<table width="100%" class="table table-sm table-bordered dataTable text-center bg-white">
<thead class="thead-dark">
<tr>
<th>Etiquetas</th>
<th style="background-color: #526e90; color: white;">Nº </th>
<th style="background-color: #526e90; color: white;">Localização</th>
<th style="background-color: #526e90; color: white;">Etiquetas Por Inventariar</th>
<th style="background-color: #526e90; color: white;">Etiquetas Inventariadas</th>
<th style="background-color: #526e90; color: white;">Válido</th>
<th style="background-color: #526e90; color: white;">Precisão (%)</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="l in i.Localizacoes">
<td ng-if="$odd" style="background-color: #ecf4fe">
<img src="../../Images/collapse.png" width="25" class="button button-light" ng-if="l.expanded" ng-click="l.expanded = false" style="cursor: pointer;" />
<img src="../../Images/expand.png" width="25" class="button button-light" ng-if="!l.expanded" ng-click="l.expanded = true" style="cursor: pointer;" />
</td>
<td ng-if="$even">
<img src="../../Images/collapse.png" width="25" class="button button-light" ng-if="l.expanded" ng-click="l.expanded = false" style="cursor: pointer;" />
<img src="../../Images/expand.png" width="25" class="button button-light" ng-if="!l.expanded" ng-click="l.expanded = true" style="cursor: pointer;" />
</td>
<td ng-if="$even">{{ l.LocalizacaoID }}</td>
<td ng-if="$odd" style="background-color: #ecf4fe">{{ l.LocalizacaoID }}</td>
<td ng-if="$even">{{ l.Referencia }}</td>
<td ng-if="$odd" style="background-color: #ecf4fe">{{ l.Referencia }}</td>
<td ng-if="$even">{{ l.EtiquetasPorInventariar }}</td>
<td ng-if="$odd" style="background-color: #ecf4fe">{{ l.EtiquetasPorInventariar }}</td>
<td ng-if="$even">{{ l.EtiquetasInventariadas }}</td>
<td ng-if="$odd" style="background-color: #ecf4fe">{{ l.EtiquetasInventariadas }}</td>
<td ng-if="$even">
<div ng-class="{ 'badge badge-success' : l.IsValid, 'badge badge-danger' : !l.IsValid }">{{ l.IsValid ? 'Sim' : 'Não' }}</div>
</td>
<td ng-if="$odd" style="background-color: #ecf4fe">
<div ng-class="{ 'badge badge-success' : l.IsValid, 'badge badge-danger' : !l.IsValid }">
{{ l.IsValid ? 'Sim' : 'Não' }} </td>
<td ng-if="$even">{{ l.Precisao }}</td>
<td ng-if="$odd" style="background-color: #ecf4fe">{{ l.Precisao * 100 }}</td>
</tr>
<tr ng-if="l.expanded" ng-repeat-end>
<td></td>
<td colspan="7">
<table width="100%" class="table table-sm table-bordered dataTable text-center bg-white">
<thead class="thead-dark">
<tr>
<th style="background-color: #526e90; color: white;">Nº </th>
<th style="background-color: #526e90; color: white;">Etiqueta</th>
<th>
<input type="checkbox" ng-model="selectAll" ng-change="selectAll()"></input></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="e in l.Etiquetas">
<td ng-if="$even">{{ e.EtiquetaID }}</td>
<td ng-if="$odd" style="background-color: #ecf4fe">{{ e.EtiquetaID }}</td>
<td ng-if="$even">{{ e.Numero }}</td>
<td ng-if="$odd" style="background-color: #ecf4fe">{{ e.Numero}}</td>
<td>
<input type="checkbox" ng-model="e.isChecked" ng-change="selectEtiqueta()">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
这是应用程序。我不确定如何只运行数组的选定元素并遍历该元素，因此在我的代码中，我正在运行父数组的每个索引。
<script>
var app = angular.module('myApp', ['ui.bootstrap']);
app.controller('inventariosCtrl', function ($scope, $http) {
$scope.searchColumns = ["Inventario", "Operador", "Armazém", "Data"]
$scope.showLoader = true;
$http.get("api/inventarios").then(function (response) {
$scope.showLoader = false;
$scope.inventarios = response.data;
$scope.totalItems = $scope.inventarios.length;
// This property will be bound to checkbox in table header
for (var i = 0; i < $scope.inventarios.Localizacoes.length; i++) {
$scope.inventarios.Localizacoes[i].allItemsSelected = false;
}
});
// This executes when entity in table is checked
$scope.selectEtiquetas = function () {
// If any entity is not checked, then uncheck the "allItemsSelected" checkbox
for (var i = 0; i < $scope.inventarios.Localizacoes.length; i++) {
for (var y = 0; y < $scope.inventarios.Localizacoes[i].Etiquetas.length; y++) {
if (!$scope.inventarios.Localizacoes[i].Etiquetas[y].isChecked) {
$scope.inventarios.Localizacoes[i].allItemsSelected = false;
return;
}
}
}
//If not the check the "allItemsSelected" checkbox
for (var i = 0; i < $scope.inventarios.Localizacoes.length; i++) {
$scope.inventarios.Localizacoes[i].allItemsSelected = true;
}
// This executes when checkbox in table header is checked
$scope.selectAll = function () {
// Loop through all the entities and set their isChecked property
for (var i = 0; i < $scope.inventarios.Localizacoes.length; y++) {
for (var y = 0; y < $scope.inventarios.Localizacoes[i].Etiquetas.length; y++) {
$scope.inventarios.Localizacoes[i].Etiquetas[y].isChecked = $scope.inventarios.Localizacoes[i].allItemsSelected;
}
}
};
})
</script>
当我尝试遍历第二个嵌套数组时，我一直处于未定义状态...它表示尚未定义Localizacoes，但它们以数组的形式出现在对象内部
答案 0 :(得分：1)
由于清单也是一个数组，因此出现未定义的错误。您需要另一个for循环来遍历清单
child或者如果您知道索引，则可以直接使用它们而不使用循环来访问数组元素。
for(var i = 0; i < $scope.inventarios.length; i++){
for(var j = 0; j < $scope.inventarios.Localizacoes.length; j++)
{
$scope.inventarios[i].Localizacoes[j].allItemsSelected = true;
}
}