Angularjs 多级表（如果单击，则位于另一个表内） 场景

假设我是一家拥有许多商店的大公司的老板。根据我在公司中的角色（在组织中的位置），我将有不同的数据访问权限。将有不同的模块，对于这个特定的问题，有访问权限的用户可以查看每日成本和销售额。 （如果这是合法的或不合法的……不要在意，这只是一个例子。）

因此，用户通过RESTAPI从后端（Java应用程序）获取所有数据，以及用户可以访问的所有存储的所有数据。然后，用户应该能够通过不同的过滤器组合过滤数据。与我的问题最相关的是以天为单位的日期间隔

将有一些图表显示不同级别的数据，下面将有一个表格区域，我想要多级别的表格，因此我的问题

迄今为止已完成

我首先创建了accordion，它在accordion组级别上有存储，然后在accordion主体内的表中有下一级别的数据。（目前只有硬编码的数据。）这里的问题是，一个相应的标题是一个字符串，经过一些讨论后，我们认为这不是一个好的解决方案，因为标题将由数据的一部分组成，而在一个表中，这些数据将是单独的列。因此，折叠时很难“列化”标题数据以水平匹配不同的“存储”（在手风琴标题之间）（当然，当一个或多个手风琴展开时会更加混乱）

我把手风琴换成了桌上的和桌上的。我们已经成功地用JSON数据填充了第一个表级别的图形化API数据，并获得了标题的i18next

JSON 可视化示例-JSFiddle 检查结果框左上角的值。尝试单击存储ID为2000的行，然后单击3000，然后再次单击3000，以查看值的变化情况。

想要的功能 当单击一行时（如JSFiddle中所示），我需要一个指令或触发的东西，以便为单击的存储获取基础数据（dayData），并显示日期间隔中的所有日期。即展开该行，并在单击的行下包含一个新表，该行还应使用ng repeat获得与现有数据相似但内联的所有数据

问题: 因此，我已经获得了从单击的行获取$index和特定数据的功能。 我还需要什么样的指令或任何其他解决方案来获取“单击行时的数据”并显示在单击行下的表格中

我不希望它一直在DOM中，因为每个商店和许多商店可能都有许多dayData。（以后将使用分页，但即使如此，也不会一直在DOM中使用。） 这意味着我必须能够在单击行时添加，以及在单击相同行或其他行时从先前单击的行中删除

---

编辑

---

.

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

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

由于我找不到一个完全有效的解决方案，我回到了我已经创建的，与ng show，并寻求一个类似的解决方案…并且存在一个。 Angular没有使用ng show/ng hide，而是有一个名为ng switch的指令

一级

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

…然后进入第二级，即第二个tr

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

，其中有第二级ng重复

这里有一个新的

检查元素，您将看到每个“折叠”的level 2表都有一个注释占位符

---

更新（2014-09-29） 根据扩展/折叠级别3的要求，这里有一个新的

注意-此解决方案始终在DOM中包含所有信息，也就是说，与早期解决方案不同，早期解决方案只添加了一个符号，表示应在请求时添加信息的位置

---

（但我不能相信这一点，因为我的朋友Axel提出了我的建议，然后添加了该功能。）

我认为更好的解决方案是在tr元素上使用ng repeat start和ng repeat end指令，而不是在tbody上使用ng repeat（这种情况下不能证明一个tbody是正确的）

请看这里：

{{person.name}
{{person.gender}
{{person.details}

我还没有足够的声誉发表评论，所以我在回答中补充了我遇到的一个额外的功能问题。我成功地使用了Pixic的结构，因为我非常喜欢DOM不会被第二级数据/表污染，直到它们被查看，并且一切工作都很完美

直到我被要求允许对顶级表进行动态排序。没问题-我可以对顶级表进行排序。问题是我一直无法想出一种方法来保持二级表（即隐藏）同步，并“移动”顶级表的排序。这是一个仅显示问题。底层数据与顶层正确关联，但由于二级表没有与父行重新排序，因此显示原始“索引”行时会出现混乱

我唯一能想到的就是在扩展一行时从控制器中动态插入第二级html，但我想知道是否还有其他人有其他想法。我尝试了ng repeat start和ng repeat end（在隐藏的第三个tr标记上，包括所有认为应该将tbody中的所有项目保持在一起的元素，并在隐藏的tbody上），但没有成功

编辑：

---

根据要求，我开始了另一个问题：

我还可以补充一点，我已经尝试寻找f

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

<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>