將表與Angular-UI手風琴混合

Question

我正在嘗試將一張桌子與angular-ui的手風琴混合在一起，但我無法想出辦法。 我不是專業人士，寫指令。 我想知道這座橋是否存在。 要實現這樣的目標：

<table class="table table-hover table-condensed" thead>
    <thead>
        <tr>
            <th>{{ data.profile.firstname }}</th>
            <th>{{ data.profile.lastname }}</th>
            <th>{{ data.profile.email }}</th>
            <th>{{ data.profile.company_name }}</th>
            <th>{{ data.profile.city }}</th>
        </tr>
    </thead>
    <tbody accordion close-others="true">
        <!-- <tr ng-repeat="client in clients" ng-click="goTo('profile/' + client.username);"> -->
        <tr ng-repeat="client in clients" accordion-group is-open="client.isOpen">
            <accordion-heading>
                <td>{{ client.firstname }}</td>
                <td>{{ client.lastname }}</td>
                <td>{{ client.email }}</td>
                <td>{{ client.company_name }}</td>
                <td>{{ client.city }}</td>
            </accordion-heading>
            Accordion Content
        </tr>
    </tbody>
</table>

雖然它不起作用:(是否有人成功實現了這樣的目標？

我正在尋找的結果是，當我點擊表格中的一行時，它會產生與手風琴相同的行為。

Answer 1

在我的情況下，我使它有點原始，但也許這對你來說也是一個很好的解決方案。 看：

 <tbody ng-repeat="person in people | orderBy:predicate:reverse"  >
  <tr ng-click="isOpen=!isOpen">
    <td>{{person.name}}</td>
    <td>{{person.job}}</td>
    <td>{{person.age}}</td>
    <td>{{person.grade}}</td>
  </tr>
  <tr ng-if="isOpen">
  <td>Just an empty line</td>
  </tr>
  </tbody>

Answer 2

1）你可以嘗試使用div代替table作為主手風琴。 這個對我有用。

2）這里是accordion table下面的jsfiddle做例子，我希望它會幫助你。 http://jsfiddle.net/Pixic/VGgbq/