使用colspan和动态数量的列创建一个表

Question

我是角色的新手,想创建一个包含未知数量列的表格.此外,该表包含第二行标题列,也包含不同且未知量的列.我必须在第二行使用colspan,但不知道如何.什么是好方法,也许是创建一个指令？还是有一个更简单的解决方案？

为了更好地理解我创建的:http://jsfiddle.net/uyLrjgyz/2/.

我以JSON格式获取所有数据,如:

{
  "header": {
    "columns": [
      {
        "name": "0ColHeader",
        "subcolumns": [
          {
            "name": ""
          }
        ]
      },
      {
        "name": "1ColHeader",
        "subcolumns": [
          {
            "name": "1Col1SubColHeader"
          },
          {
            "name": "1Col2SubColHeader"
          },
          {
            "name": "1Col3SubColHeader"
          }
        ]
      },
      {
        "name": "2ColHeader",
        "subcolumns": [
          {
            "name": "2Col1SubColHeader"
          }
        ]
      },
      {
        "name": "3ColHeader",
        "subcolumns": [
          {
            "name": "3Col1SubColHeader"
          },
          {
            "name": "3Col2SubColHeader"
          }
        ]
      }
    ]
  },
  "rows": {
    "data": [
      [
        {
          "value": "text"
        },
        {
          "value": "0"
        },
        {
          "value": "0"
        },
        {
          "value": "1"
        },
        {
          "value": "0"
        },
        {
          "value": "1"
        },
        {
          "value": "0"
        }
      ],
      [
        {
          "value": "more text"
        },
        {
          "value": "1"
        },
        {
          "value": "0"
        },
        {
          "value": "1"
        },
        {
          "value": "1"
        },
        {
          "value": "0"
        },
        {
          "value": "1"
        }
      ]
    ]
  }
}

我可以修改json,只要我不必在后端将其转换为很多.这个angularjs和模板表与我的问题有关,但它有点吝啬.

Answer 1

你快到了.这是工作小提琴

对于colspan来说这很简单 colspan="{{col.subcolumns.length}}"

但对于下一个子标题,我们应该在控制器之后写下面的处理程序 $scope.table

$scope.subHeaders = function () {
    var subs = [];
    $scope.table.header.columns.forEach(function (col) {
        col.subcolumns.forEach(function (sub) {
            subs.push(sub);
        });
    });
    return subs;
};

第二行标记:

<tr>
    <th ng-repeat="col in subHeaders()">{{col.name}}</th>
</tr>

全表:

<div ng-app="tableApp" ng-controller="tableController">
    <table>
        <tr>
            <th colspan="{{col.subcolumns.length}}" ng-repeat="col in table.header.columns">{{col.name}}</th>
        </tr>
        <tr>
            <th ng-repeat="col in subHeaders()">{{col.name}}</th>
        </tr>
        <tr ng-repeat="row in table.rows.data">
            <td ng-repeat="cell in row">{{cell.value}}</td>
        </tr>
    </table>
</div>