如何使用单纳克重复

Question

我得到具有列和行如下

$scope.table = { 
    Columns: [{Header:"22-Jul-15",SubHeaders: ["10:33 AM"]} 
     , {Header:"21-Jul-15",SubHeaders: ["03:40 AM"]} 
     , {Header:"17-Jul-15",SubHeaders: ["01:05 PM", "12:06 PM"]}] 
, Rows:[{Items:[{Value:1},{Value:5},{Value:8},{Value:""}]} 
     ,{Items:[{Value:2},{Value:6},{Value:9},{Value:""}]} 
     ,{Items:[{Value:3},{Value:7},{Value:10},{Value:15}]}] 
} //end of table 

我想显示Columns.SubHeaders作为表的子标题行表的JSON使用纳克重复用于阵列中的阵列。

这里是我的尝试，但没有奏效

<table class="table table-stripped table-bordered"> 
     <thead> 
      <tr> 
       <th ng-repeat="col in table.Columns" colspan="{{col.SubHeaders.length}}">{{col.Header}}</th> 
      </tr> 
      <tr> 
       <td class="center text-black" ng-repeat="head in table.Columns[0].SubHeaders">{{head}}</td> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="row in table.Rows"> 
       <td ng-repeat="item in row.Items"> 
        {{item.Value}} 
       </td> 
      </tr> 
     </tbody> 
    </table> 

我以前head in table.Columns[0].SubHeaders只是为了显示它正在为硬编码的索引值。

如何使用单个ng-repeat来实现这一点？我可以使用两个ng-repeats，但它会导致不必要的html标记。

这里是complete fiddle

Answer 1

我创造了这个提琴手（从你的分支）：

https://jsfiddle.net/b50hvzef/1/

的想法是加入副标题，因为它们是他们的实际列：

<td class="center text-black" ng-repeat="head in subHeaders">{{head}}</td> 

和代码如下所示：

var app = angular.module("app",[]); 
app.controller("MyController", function ($scope, $http) { 
$scope.table = { 
    Columns: [{Header:"22-Jul-15",SubHeaders: ["10:33 AM"]} 
     , {Header:"21-Jul-15",SubHeaders: ["03:40 AM"]} 
     , {Header:"17-Jul-15",SubHeaders: ["01:05 PM", "12:06 PM"]}] 
,Rows:[{Items:[{Value:1},{Value:5},{Value:8}]} 
     ,{Items:[{Value:2},{Value:6},{Value:9}]} 
     ,{Items:[{Value:3},{Value:7},{Value:10}]}] 
    }; 
var subHeaders = []; 
$scope.table.Columns.forEach(function(col) { 
    col.SubHeaders.forEach(function(subHeader) { 
     subHeaders.push(subHeader); 
    }); 
}); 
$scope.subHeaders = subHeaders; 

}）;

请注意，列和数据之间仍然存在不匹配。但这取决于你如何解决它。

希望这会有所帮助。