表格中带有 ng 重复的 2D 多级对象

Question

我有一个这样的 2D 嵌套对象

$scope.analysisDataNew = [
{
"data":{
"row1":{
"col1":{
"subCol1": 10,
"subCol2": 10,
},
"col2":{
"subCol1": 10,
"subCol2": 10,
"subCol3": 10,
},
"col3":{
"subCol1": 10,
},
},
"row2":{
"col1":{
"subCol1": 10,
"subCol2": 10,
},
"col2":{
"subCol1": 10,
"subCol2": 10,
"subCol3": 10,
},
"col3":{
"subCol1": 10,
},
},
}
}
];

我正在尝试使用它来创建带有 ng-repeat 的表。

到目前为止，我尝试的是这个

for (var i = 0; i < $scope.analysisDataNew.length; i++) {
// row list
$scope.analysisDataNew[i].xAxis = Object.keys($scope.analysisDataNew[i].data);
// col list 
if($scope.analysisDataNew[i].subCol){
var rows = Object.keys($scope.analysisDataNew[i].data);
var cols = $scope.analysisDataNew[i].data[rows[0]];
var colList = [];
for(var j=0; j<Object.keys(cols).length; j++){
colList.push({name: Object.keys(cols)[j]});
colList[j].subcol = [];
for(var k=0; k < Object.keys(cols[Object.keys(cols)[j]]).length; k++){
colList[j].subcol.push(Object.keys(cols[Object.keys(cols)[j]])[k]);
};
};
$scope.analysisDataNew[i].colList = colList;
} else {
$scope.analysisDataNew[i].colList = Object.keys($scope.analysisDataNew[i].data[$scope.analysisDataNew[i].xAxis[0]]);
};
console.log($scope.analysisDataNew[i]);
};

当没有子列时，我可以轻松打印数据，但问题出在子列上。

有人可以帮忙吗？

Answer 1

我创建了一个全div解决方案，其中我不提前转换数据： https://next.plnkr.co/edit/3fVwZCyyeeHhu6AT

诀窍是在..."如下所述：如何使用 ng-repeat 遍历 AngularJS 中的映射条目。这允许遍历地图：

<div class="tbl">
<div ng-repeat='(rowId, rowValue) in analysisDataNew[0].data' class="tbl-row"> 
<div ng-repeat="(colId, colValue) in rowValue" class="tbl-cell"> 
<div class="tbl tbl-inner">
<div class="tbl-row"> 
<div ng-repeat="(subColId, subColValue) in colValue" class="tbl-cell"> 
{{subColValue}}
</div>
</div>
</div>
</div>
</div>
</div>

如果您(可能(想要显示分析DataNew中所有条目的所有数据，则需要在外部ng重复周围增加一个ng重复。