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

展开和折叠行以使ng-table无法正常工作

1 个答案: