带有 ng-repeat 的表中的 2d 多级对象答案

【问题标题】：2d multi level object in table with ng-repeat带有 ng-repeat 的表中的 2d 多级对象
【发布时间】：2018-07-04 17:03:22
【问题描述】：

我有一个像这样的 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]);
};

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

有人可以帮忙吗？

【问题讨论】：

你自己尝试过吗？
是的，当然我尝试在控制器中使用循环创建我的数组，直到没有子列我很好并且能够在表格和高图中打印数据，但我面临子列的问题
你可以发布你已经得到的东西
@GauravAggarwal 您可以将对象更改为数组吗？搞定之后就很简单了
@mvermand 足够公平......已发布

标签： javascript html angularjs angularjs-ng-repeat

【解决方案1】：

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

诀窍是使用 ng-repeat="(key, value) in ..."，如下所述：How to use ng-repeat to iterate over map entries in 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>

如果您（可能）想要显示 analysisDataNew 中所有条目的所有数据，则需要在外部 ng-repeat 周围增加一个 ng-repeat。

【讨论】：

@Gaurav Aggarwal，我的解决方案符合您的需求吗？