多级表(如果单击则在另一个表内)

Question

脚本

可以说我是一家拥有众多商店的大公司的老板.根据我在公司内部的角色(组织中的位置),我将拥有不同的数据访问权限.将有不同的模块,对于这个具体问题,有一个访问权限的用户可以通过每日成本和销售.(如果那是合法的......不关心,这只是一个例子.)

因此,用户通过BackEnd(Java应用程序)中的REST API获取所有数据,其中包含用户可访问的所有商店的所有数据.然后,用户应该能够通过不同的过滤器组合过滤数据.与我的问题最相关的是日期间隔天数.

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

到目前为止已完成

1. 我首先创建了手风琴组级别的手风琴,然后是手风琴组内的表格中的下一级数据.(目前只有硬编码数据.)这里的问题是相应的标题是一个字符串,经过一些讨论后我们认为这不是一个好的解决方案,因为标题将包含在表格中的部分数据单独的列.因此,难以"标题化"标题数据以在折叠时水平地匹配不同的"商店"(在手风琴标题之间)(并且当一个或多个手风琴被扩展时当然甚至更麻烦).
2. 我用table和ng-repeat替换了手风琴.已经成功填充了第一个表级别,其中包含来自具有JSON数据的图形化API以及i18next用于标题的数据.

JSON

{ 
"metadata":{
    "storesInTotal":"25",
    "storesInRepresentation":"2"
},
"storedata":[
    { 
        "store" : {
            "storeId" : "1000",
            "storeName" : "Store 1",
            "storePhone" : "+46 31 1234567",
            "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" : "+46 8 9876543",
            "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

检查结果框中左上角的值.尝试单击具有Store ID 2000的示例行,然后单击3000然后再单击3000以查看值如何更改. 我的JSFiddle的当前更新

想要的功能

当单击一行时(如JSFiddle所示),我想要一个指令或触发的东西,来获取点击的商店的底层数据(dayData)并显示日期间隔中的所有日期.即扩展行,并在单击的行下包括一个新表,也应该使用ng-repeat来显示与现有数据类似的所有数据,但是内联.

题

所以我已经获得了获取$ index以及来自点击行的特定数据的功能.我还需要什么样的指令或任何其他解决方案才能获得"点击行时的数据"并显示在单击行下的表格中？

我一直不想在DOM中使用它,因为每个商店和许多商店可能有很多dayData.(并且稍后会使用分页,但即使如此,也不会一直使用DOM.)这意味着我必须能够在单击一行时添加ADD,并且单击之前单击的相同或另一个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分叉我的,然后添加了功能.)