Mixing a table using Angular -UI Accordion

Question

I am trying to mix a table with an angular -ui accordion, but I cannot figure out how to do this. I am not a professional writing directives. I wonder if such a bridge exists. 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> 

Although it doesn't work :( Anyone who has achieved something like this?

The result I'm looking for is when I click on a row in a table, it performs the same accordion behavior.

Answer 1

In my case, I made it a little primitive, but maybe that would be a good solution for you. Take a 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> 

Answer 2

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

2) And here is the example accordion table made in JSFiddle below, I hope this helps you. http://jsfiddle.net/Pixic/VGgbq/