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 and template table与我的问题有关，但它有点吝啬。

Answer 1

你差不多了。这是 Working fiddle

对于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>

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

1 个答案: