Question

我有一个json of table，其中包含列和行，如下所示

$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显示为表格的子标题行。

这是我尝试过的，但没有效果

  <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;

}）;

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

希望这有帮助。

如何使用单个ng-repeat对阵列中的数组使用ng-repeat

1 个答案: