如何使用單納克重複

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; 

}）;

請注意，列和數據之間仍然存在不匹配。但這取決於你如何解決它。

希望這會有所幫助。