带有可折叠行

Question

我创建了一个Bootstrap表，并希望有可折叠的行来显示一些其他信息，但似乎无法使其工作。我的代码如下所示：

<div ng-if="!c.data.loading && c.list.length>0" class="list-group" style="max-height: none; overflow-y: auto;">
    <table class="table table-striped table-hover">
      <thead>
        <tr>
          <th></th>
          <th>Work Type</th>
          <th>Work Name</th>          
          <th>From</th>
          <th>To</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in c.list track by $index" ng-if="$index >= data.window_start && $index < data.window_end">

          <td style="vertical-align: middle;">
            <div href="#{{item.sys_id}}" ng-class="{'accordion-toggle collapsed':item.work_history_type == 'Uniformed Service'}" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="collapseDetails"></div>
          </td>
          <td>{{item.work_history_type}}
            <a href="javascript:void(0)">
              <i class="fa fa-edit m-l-xs" title="Edit Work History" ng-click="c.newEntry(item.sys_id,'x_dnf_gw_found_work_history','newWork');"></i>
            </a>
          </td>
          <td>{{item.work_name}}</td>
          <td>{{item.from}}</td>
          <td>{{item.to}}</td>
          <td class="text-center">
            <button title="Add Campaign" ng-if="item.work_history_type=='Uniformed Service'" type="button" class="btn btn-link btn-xs" ng-click="c.newEntry(-1, 'new_campaign','newWork')">Add Campaign</button>
          </td>
        </tr>

        <tr id="{{item.sys_id}}" class="collapse">
              <td colspan="6" ng-repeat="item2 in c.list2 | filter: {'uni' : item.sys_id}">
                <span ng-click="c.newEntry(item2.sys_id, 'new_campaign','newWork')"class="h4" >{{item2.camp}}: From: {{item2.from}} To: {{item2.to}}</span>
              </td>
            </tr>     

      </tbody>
    </table>
  </div>

该表显示正常，但显示更多信息的行不会切换打开或关闭，它只是不显示。我在这里想要做些什么呢？谢谢！