如何使用带有ng-repeat和angular-ui.bootstrap.collapse的ui-grid

Question

我有一个表格，我使用 ng-repeat 和 angular-ui collapse 来显示数据。我想实现 ui-grid ，但我甚至没有解决方案。

以下是我的代码：https://plnkr.co/edit/mKeRaDv22WzBXjRT67oO?p=preview

html代码：

  <div ng-controller="MyCtrl">
    <table class="table table-striped">
      <thead>
        <tr>
          <th style="width: 20%">A: </th>
          <th style="width: 20%">B: </th>
          <th style="width: 15%">C: </th>
          <th style="width: 15%">D: </th>
          <th style="width: 15%">E: </th>
          <th style="width: 15%">F: </th>
        </tr>
      </thead>
      <tbody ng-repeat="data in myData" ng-click="element.isCollapsed = !element.isCollapsed">
        <tr>
          <td>{{data.a}}</td>
          <td>{{data.b}}</td>
          <td>{{data.c}}</td>
          <td>{{data.d}}</td>
          <td>{{data.e}}</td>
          <td>{{data.f}}</td>
          <td></td>
        </tr>
        <tr collapse="element.isCollapsed" ng-show="element.isCollapsed">
          <td colspan="2">{{data.g}} </td>
          <td colspan="2">{{data.h}} </td>
          <td colspan="2">{{data.i}} </td>
        </tr>
        <tr collapse="element.isCollapsed" ng-show="element.isCollapsed">
          <td colspan="2">{{data.j}} </td>
          <td colspan="2">{{data.k}} </td>
          <td colspan="2">{{data.l}} </td>
        </tr>
        <tr collapse="element.isCollapsed" ng-show="element.isCollapsed">
          <td colspan="6">{{data.m}} </td>
        </tr>
      </tbody>
    </table>
  </div>