collapsable data row in angular js

Question

I would like to display parent and child related data in collapsable format without using panel.

Code:

<div  ng-app="app" ng-controller="customersCtrl"> 
     <table st-table="rowCollection" class="table table-striped">
         <tbody>
             <tr ng-repeat="x in names">
                 <th > {{x.Country }}</th>
                 <td >{{ x.Name }}</td>
             </tr>
         </tbody>
     </table>  
</div>

Preferable:

I would like to have list of names under country and upon expanding i should be able to see list of names for that country.

Answer 1

I suggest you using accordion directive of angular-ui-bootstrap: https://angular-ui.github.io/bootstrap/#/accordion

In alternative you can use the collapse directive inside an ng-repeat: https://angular-ui.github.io/bootstrap/#/collapse.