Question

的方案

让我们说我是一家拥有众多商店的大公司的老板。根据我在公司内部的角色（组织中的位置），我将拥有不同的数据访问权限。将有不同的模块，对于这个特定问题，有一个访问权限的用户可以通过每日成本和销售。（如果这是合法的或不合法......不在乎，这只是一个例子。）

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

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

到目前为止

我首先创建了手风琴组级别的手风琴，然后是手风琴组内的表格中的下一级数据。（目前只有硬编码数据。）这里的问题是相应的标题是一个字符串，经过一些讨论后我们认为这不是一个好的解决方案，因为标题将包含在表格中的部分数据单独的列。因此很难“标题化”标题数据以便在折叠时水平地匹配不同的“商店”（在手风琴标题之间）（当然，当一个或多个手风琴被扩展时，当然会更加混乱）。
我用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以查看值如何更改。 Current update of my JSFiddle

通缉功能

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

问题

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

我不希望它一直存在于DOM中，因为每个商店和许多商店可能有很多dayData。（并且稍后会使用分页，但即使如此，也不会一直使用DOM。）这意味着我必须能够在单击一行时添加ADD，并且单击之前单击的相同或另一个REMOVE。

修改

New updated 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分叉我的，然后添加了功能。）

Answer 2

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

看看这里：

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

我还没有足够的声誉可以发表评论，所以我在回答时遇到了一个我遇到的其他功能问题。我成功地使用了Pixic的结构，因为我真的很喜欢DOM没有被二级数据/表污染，直到它们被查看并且它们都完美地工作。

直到我被要求允许动态排序顶级表。没问题 - 我可以排序顶级表。问题是我一直无法想出一种方法来保持第二级表（即隐藏）同步并且＆＃34;移动＆＃34;与顶级表格的类型。这是一个仅显示问题。底层数据与顶层正确关联，但显示屏混乱，因为它显示原始＆＃34;索引＆＃34;第二级表格中的行不会与父行重新排序。

我唯一可以想到的是在扩展行时从控制器动态插入第二级html，但想知道是否有其他人有任何其他想法。我尝试了ng-repeat-start和ng-repeat-end（在一个隐藏的第三个tr标签上，包括所有想要将所有项目保存在tbody中的元素，以及隐藏的tbody），但这不起作用

修改根据要求，我已经开始了另一个问题：Multi-level tables (inside another if clicked) and Dynamic Sorting of Top Level Table

多级表（如果单击则在另一个表内）

的方案

到目前为止

JSON

视觉示例 - JSFiddle

通缉功能

问题

修改

3 个答案:

更新（2014-09-29）