多层表（如果单击，则在另一个表中）

Question

情境

可以说我是一家拥有许多商店的大公司的所有者。根据我在公司中所扮演的角色（在组织中的职位），我将对数据具有不同的访问权限。将有不同的模块，对于这个特定的问题，有一个模块可以使拥有访问权限的用户每天进行成本和销售。（无论是否合法……无关紧要，仅举一个例子。）

用户因此可以通过REST
API从BackEnd（Java应用程序）获取所有数据，以及该用户有权访问的所有商店的所有数据。然后，用户应该能够通过不同的过滤器组合来过滤数据。与我的问题最相关的是日期间隔（天）。

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

到目前为止完成

1. 我首先创建了具有手风琴组级别存储的手风琴，然后在表中的手风琴主体中存储了下一级数据。（目前仅使用硬编码的数据。）这里的问题是，相应的标题是一个字符串，经过一番讨论，我们认为这不是一个好的解决方案，因为标题将由表中的数据部分组成单独的列。因此，当折叠时（在折叠一个或多个折叠式手风琴时，当然，要弄乱”标题数据以使其水平匹配（在折叠式手风琴标题之间）不同的“存储”是困难的）。
2. 我将手风琴替换为table和ng-repeat。已成功使用图形化API的数据和JSON数据填充了第一级表，并让i18next用作标题。

JSON格式

{ 
"metadata":{
    "storesInTotal":"25",
    "storesInRepresentation":"2"
},
"storedata":[
    { 
        "store" : {
            "storeId" : "1000",
            "storeName" : "Store 1",
            "storePhone" : "[phone]",
            "storeAddress": "Some street 1",
            "storeCity" : "Gothenburg"
        },
        "data" : {
            "startDate" : "2013-07-01",
            "endDate" : "2013-07-02",
            "costTotal" : "100000",
            "salesTotal" : "150000",
            "revenueTotal" : "50000",
            "averageEmployees" : "3.5",
            "averageEmployeesHours" : "26.5",
            "dayData" : [
                { 
                    "date" : "2013-07-01",
                    "cost" : "25000",
                    "sales" : "15000",
                    "revenue" : "4000",
                    "employees" : "3",
                    "employeesHoursSum" : "24"
                },
                {
                    "date" : "2013-07-02",
                    "cost" : "25000",
                    "sales" : "16000",
                    "revenue" : "5000",
                    "employees" : "4",
                    "employeesHoursSum" : "29"
                }
            ]
        }
    },
    {
        "store" : {
            "storeId" : "2000",
            "storeName" : "Store 2",
            "storePhone" : "[phone]",
            "storeAddress": "Big street 100",
            "storeCity" : "Stockholm"
        },
        "data" : {
            "startDate" : "2013-07-01",
            "endDate" : "2013-07-02",
            "costTotal" : "170000",
            "salesTotal" : "250000",
            "revenueTotal" : "80000",
            "averageEmployees" : "4.5",
            "averageEmployeesHours" : "35",
            "dayData" : [
                { 
                    "date" : "2013-07-01",
                    "cost" : "85000",
                    "sales" : "120000",
                    "revenue" : "35000",
                    "employees" : "5",
                    "employeesHoursSum" : "38"
                },
                {
                    "date" : "2013-07-02",
                    "cost" : "85000",
                    "sales" : "130000",
                    "revenue" : "45000",
                    "employees" : "4",
                    "employeesHoursSum" : "32"
                }
            ]
        }
    }
],
"_links":{
    "self":{
        "href":"/storedata/between/2013-07-01/2013-07-02"
    }
}
}

可视示例-JSFiddle

检查结果框中左上角的值。尝试单击具有商店ID 2000的示例行，然后依次单击3000和3000，以查看值的变化。
我的JSFiddle的最新更新

所需功能

当单击某行时（如JSFiddle中所示），我想要一个指令或触发的东西去获取所单击的商店的基础数据（dayData），并显示日期间隔中的所有天数。即展开该行，并在被单击的行下包括一个新表，该表也应使用ng-
repeat来显示所有与现有数据相似但内联的数据。

题

因此，我已经拥有了从索引行中获取$
index以及特定数据的功能。我还需要什么样的指令或任何其他解决方案来获取“行被单击时的数据”并显示在被单击行下方的表中？

我不想一直在DOM中使用它，因为每个商店和许多商店可能有很多dayData。（并且以后会使用分页，但是即使这样，也不会一直在DOM中使用。）这意味着我必须能够在单击一行时以及从先前单击的内容中单击相同或另一个REMOVE时添加。

编辑

新更新的JSFiddle。

Answer 1

要求是不要用所有第二级表填充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 data-ng-switch-when="true">

，其中您具有第二级ng-repeat。

这是一个新的 JSFiddle 。

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

更新（2014-09-29）

根据扩展/折叠第3级的要求，这里有一个新的 JSFIDDLE 。

注意！ -此解决方案始终具有DOM中的所有信息，即不像以前的解决方案那样，该解决方案仅添加了关于应在请求时将信息添加到何处的符号。

（不过，由于我的朋友Axel分叉了我的产品，然后添加了功能，因此我对此一无所知。）