javascript - 扩展和折叠 ng-table 的行不起作用

Question

我正在尝试为 ng-table 实现展开和折叠行，基本上我想要的是如果您单击行它会展开更多细节。但目前所有行都会在单击时展开。有谁知道如何实现这一点？

感谢任何帮助

<table ng-table="tableParams" class="table table-striped">
  <tr ng-repeat-start="ticket in ng">
    <td data-title="'Id'">{{ticket.requestId}}</td>
    <td style="width:60%;" data-title="'Subject'" ><a href="#" rel="nofollow" ui-sref="app.detail({id: ticket.requestId})">{{ticket.subject}}</a></td>
    <td data-title="'State'"><span ng-class="ticket.state+'Color'">{{ticket.state}}</span></td>
    <td data-title="'Priority'">{{ticket.priority}}</td>
    <td >
      <a ui-sref="app.detail({id: ticket.requestId})" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
    <!--	<a  class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Expand" ng-click="toggleDetail($index);lastComment(ticket.requestId)"><i class="fa"  >+/-</i></a>-->
      <button ng-if="user.expanded" ng-click="user.expanded = false">-</button>
      <button ng-if="!user.expanded" ng-click="user.expanded = true">+</button>
    </td>
  </tr>
  <tr ng-if="user.expanded" ng-repeat-end="" >
            <td colspan="8" >Test</td> 
                
</tr>
</table>

Answer 1

您必须为您的行放置变量 expanded 而不是一般的 var。这意味着它不会是 user.expanded 但它必须是 ticket.expanded

<table ng-table="tableParams" class="table table-striped">
  <tr ng-repeat-start="ticket in ng">
    <td data-title="'Id'">{{ticket.requestId}}</td>
    <td style="width:60%;" data-title="'Subject'" ><a href="#" rel="nofollow" ui-sref="app.detail({id: ticket.requestId})">{{ticket.subject}}</a></td>
    <td data-title="'State'"><span ng-class="ticket.state+'Color'">{{ticket.state}}</span></td>
    <td data-title="'Priority'">{{ticket.priority}}</td>
    <td >
      <a ui-sref="app.detail({id: ticket.requestId})" class="btn btn-transparent btn-xs" tooltip-placement="top" tooltip="Edit"><i class="fa fa-pencil"></i></a>
    <!--    <a  class="btn btn-transparent btn-xs tooltips" tooltip-placement="top" tooltip="Expand" ng-click="toggleDetail($index);lastComment(ticket.requestId)"><i class="fa"  >+/-</i></a>-->
      <button ng-if="ticket.expanded" ng-click="ticket.expanded = false">-</button>
      <button ng-if="!ticket.expanded" ng-click="ticket.expanded = true">+</button>
    </td>
  </tr>
  <tr ng-if="ticket.expanded" ng-repeat-end="" >
            <td colspan="8" >Test</td> 

</tr>
</table>

Working Fiddle