Mixing a Table with Angular-UI Accordion

问题

I'm trying to mix a table with angular-ui's accordion but I can't figure out a way to do it. I'm not a pro, writing directives. I wonder if such a bridge exist. To achieve something like this :

<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>

Though it's not working :( Is there anyone who succeded to achieve something like this ?

The result I'm looking for is for when I click on a line in the table, it does the same behavior of an accordion.

回答1:

In my case I made it a bit primitive but maybe that would be a good solution for you as well. Look:

 <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>

回答2:

1) You can try div instead of table for main accordion. It works for me.

2) And here is the accordion table example done in JSFiddle below, i hope it will help you. http://jsfiddle.net/Pixic/VGgbq/

来源：https://stackoverflow.com/questions/26588753/mixing-a-table-with-angular-ui-accordion

标签

angularjs

css3

angular-ui-bootstrap