如何使用带有角度的备用colspan创建一个表?

时间:2017-03-02 22:07:30

标签: javascript angularjs html-table

我想创建一个看起来像这样的表:

|¯¯¯¯|¯¯¯¯|¯¯¯¯|¯¯¯¯|¯¯¯¯|
|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯|
|¯¯¯¯|¯¯¯¯|¯¯¯¯|¯¯¯¯|¯¯¯¯|
­­­­­­­­­­­­­­­­­|¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯|
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯

有角度,使用ng-repeat。

我尝试用这个html做但是它不起作用。

<div ng-controller="MyCtrl">
  <table>
    <thead>
      <tr>
        <th>col1</th>
        <th>col2</th>
        <th>col3</th>
        <th>col4</th>
        <th>col5</th>
      </tr>
    </thead>
    <tbody>
      <div ng-repeat="item in items">
        <tr>
          <td>{{item.val1}}</td>
          <td>{{item.val2}}</td>
          <td>{{item.val3}}</td>
          <td>{{item.val4}}</td>
          <td>{{item.val5}}</td>
        </tr>
        <tr>
          <td colspan="5">QWERTY</td>
        </tr>
      </div>
    </tbody>
  </table>
</div>

1 个答案:

答案 0 :(得分:0)

您可以使用ng-repeat-startng-repeat-end,只有将ng-repeat放在单个元素上才能完成您的工作。类似的东西:

<tbody>
    <tr ng-repeat-start="item in items">
        <td>{{item.val1}}</td>
        <td>{{item.val2}}</td>
        <td>{{item.val3}}</td>
        <td>{{item.val4}}</td>
        <td>{{item.val5}}</td>
    </tr>
    <tr ng-repeat-end>
        <td colspan="5">QWERTY</td>
    </tr>
</tbody>