使用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>