Multi-level tables (inside another if clicked)

Question

Scenario

Lets say I am owner of a big company that has many stores. Depending on what role (place in the organization) I have within the company,

Answer 1

The requirement was to not fill the DOM with all second level tables and I came up with a solution for it.

First I tried creating a custom directive and I got it to insert a row at the right place (beneath the clicked row) and created a second level table with headers but could not get it to populate with rows using ng-repeat.

Since I could not find a solution that worked fully I went back to what I already had created, with ng-show and sought a solution like it...and there exist one. Instead of using ng-show/ng-hide, Angular has a directive called ng-switch.

In level one

<tbody data-ng-repeat="storedata in storeDataModel.storedata" 
       data-ng-switch on="dayDataCollapse[$index]">

...and then in the second level, i.e. the second tr

<tr data-ng-switch-when="true">

, in which you have the second level ng-repeat.

Here's a new JSFiddle.

Inspect elements, and you will see that there is a comment placeholder for each "collapsed" level 2 table.

---

UPDATE (2014-09-29)

Upon request of also expanding/collapsing level 3, here's a new JSFIDDLE.

NOTE! - This solution have all information in the DOM at all times, i.e. not as the earlier solution, which only added a notation for where the information should be added upon request.

(I can't take credit of this one though, since my friend Axel forked mine and then added the functionality.)

Answer 2

I think that a better solution is to use the ng-repeat-start and ng-repeat-end directives on the tr elements rather than using the ng-repeat on the tbody (this case doesn't justify more than a single tbody).

Have a look here:

PLNKR

<tr ng-repeat-start="person in people">
  <td>
    <button ng-if="person.expanded" ng-click="person.expanded = false"></button>
    <button ng-if="!person.expanded" ng-click="person.expanded = true"></button>
  </td>
  <td>{{person.name}}</td>
  <td>{{person.gender}}</td>
</tr>
<tr ng-if="person.expanded" ng-repeat-end="">
  <td colspan="3">{{person.details}}</td>
</tr>

Answer 3

I don't have enough reputation yet to comment, so I'm following up in an answer with an additional functionality issue I have come across. I used Pixic's structure successfully as I really like that the DOM is not polluted with the second level data/tables until they are viewed and it is all working perfectly.

Until I was asked to allow dynamic sorting of the top level table. No problem - I can sort the top level table. The problem is I have been unable to come up with a way to keep the second level table (ie hidden ) synced up and "moving" with the sort of the top level table. This is a display only issue. The underlying data is properly associated with the top level, but the display is messed up as it displays the original "indexed" row as the second level tables don't re-sort with the parent row.

The only thing I can come up with is dynamically inserting the second level html from the controller upon expanding a row, but wondering if anyone else had any other ideas. I tried ng-repeat-start and ng-repeat-end (on a hidden third tr tag to include all elements thinking that should keep all items in the tbody together, and on a hidden tbody), but that didn't work.

Edit: As requested, I have started another question: Multi-level tables (inside another if clicked) and Dynamic Sorting of Top Level Table