angularjs - Nested/Tree View using HTML table in Angular.js -

view tree collapse , expand mode :

the markup used html table.

using ng-repeat getting tricky.

the data each row below

{       "id": 1,     "name": "groceries",     "price": "0",     "total": "20",     "parentflag": "true",     "parentid": "",     childitems: [{},{}] } 

using ul , li tags, can achieve using ng-include.

but existing app markup uses table. starting think changing markup use ul,li , div "only" way go. missing here? pointers/approaches?

you can try like:

<table class="table">     <thead>         <tr>             <th>package</th>             <th>price</th>         </tr>     </thead>     <tbody>         <tr ng-repeat-start='package in packages'>             <!-- take ng-repeat-start -->             <td>                 <button ng-click="viewchilds= !viewchilds">+</button>{{package.name}}</td>             <td>{{package.total}}</td>         </tr>         <tr>             <!-- repeated package-->             <td colspan='2' ng-class="viewchilds? '' : 'hide'">                 <!-- viewchilds controls collapse () -->                 <table class="subtable">                     <!-- make ident in subtable style -->                     <tbody>                         <tr ng-repeat='chilitem in package.childitems'>                             <!-- nested repeat each children -->                             <td>{{chilitem.name}}</td>                             <td>{{chilitem.price}}</td>                         </tr>                     </tbody>                 </table>             </td>         </tr>         <tr ng-repeat-end></tr>         <!-- repeated (if need) -->      </tbody> </table> 

i suspect can figure out. don't forget show final work.

here plunker: http://plnkr.co/edit/enxycu?p=preview