要求不是用所有二级表填充 DOM，我想出了一个解决方案.

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

首先，我尝试创建一个自定义指令，并让它在正确的位置(在单击的行下方)插入一行，并创建了一个带有标题的二级表，但无法使用 ng-repeat 填充行.

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.

因为我找不到一个完全有效的解决方案，所以我回到我已经创建的，使用 ng-show 并寻找类似的解决方案......并且存在一个解决方案.Angular 没有使用 ng-show/ng-hide，而是有一个名为 ng-switch 的指令.

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.

一级

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

...然后在第二级，即第二个 tr

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

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

，其中你有第二级 ng-repeat.

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

这是一个新的 JSFiddle.

Here's a new JSFiddle.

检查元素，您会看到每个折叠"的 2 级表格都有一个注释占位符.

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

根据还扩展/折叠级别 3 的请求，这里有一个新的 JSFIDDLE强>.

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

注意！ - 此解决方案始终包含 DOM 中的所有信息，即与早期解决方案不同，后者仅添加了应请求添加信息的位置的符号.

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.

(不过我不能相信这个，因为我的朋友 Axel 分叉了我的，然后添加了功能.)

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