以角度迭代可折叠引导数据表

Question

我正在尝试使用以下 JSON 将我的静态引导数据表（以增量方式列出不同月份收获的水果总数的计数）变为动态数据表

JSON

{
  "fruit": [
    {
      "fruitName": "All",
      "season": [
        {
          "seasonName": "All",
          "yearValues": [
            {
              "year": 2017,
              "value": 200
            },
            {
              "year": 2018,
              "value": 200
            }
          ]
        },
        {
          "seasonName": "Sept",
          "yearValues": [
            {
              "year": 2017,
              "value": 100
            },
            {
              "year": 2018,
              "value": 100
            }
          ]
        },
        {
          "seasonName": "Oct",
          "yearValues": [
            {
              "year": 2017,
              "value": 100
            },
            {
              "year": 2018,
              "value": 100
            }
          ]
        }
      ]
    },
    {
      "fruitName": "Orange",
      "season": [
        {
          "seasonName": "All",
          "yearValues": [
            {
              "year": 2017,
              "value": 100
            },
            {
              "year": 2018,
              "value": 100
            }
          ]
        },
        {
          "seasonName": "Sept",
          "yearValues": [
            {
              "year": 2017,
              "value": 50
            },
            {
              "year": 2018,
              "value": 50
            }
          ]
        },
        {
          "seasonName": "Oct",
          "yearValues": [
            {
              "year": 2017,
              "value": 50
            },
            {
              "year": 2018,
              "value": 50
            }
          ]
        }
      ]
    },
    {
      "fruitName": "Grapes",
      "season": [
        {
          "seasonName": "All",
          "yearValues": [
            {
              "year": 2017,
              "value": 100
            },
            {
              "year": 2018,
              "value": 100
            }
          ]
        },
        {
          "seasonName": "Sept",
          "yearValues": [
            {
              "year": 2017,
              "value": 50
            },
            {
              "year": 2018,
              "value": 50
            }
          ]
        },
        {
          "seasonName": "Oct",
          "yearValues": [
            {
              "year": 2017,
              "value": 50
            },
            {
              "year": 2018,
              "value": 50
            }
          ]
        }
      ]
    }
  ]
}

HTML

 <tr data-toggle="collapse" data-target=".order11" ng-repeat="item in result.fruit">
                <td>{{item.fruitName}}</td>
                <td>All</td>
                <td>200 </td>
                <td>200</td>
                <td>400</td>
            </tr>
            <tr class="collapse order11">
                <td></td>
                <td>Sept</td>
                <td>100</td>
                <td>100 </td>
                <td>200</td>
            </tr>
            <tr class="collapse order11">
                <td></td>
                <td>Oct</td>
                <td>100</td>
                <td>100 </td>
                <td>200</td>
            </tr> 

数据表的功能是，当您单击一行时，它会展开以显示子元素，但我无法使用多个 ng-repeat 迭代我的表，因为我使用单独的 <tr> 来实现折叠功能。有没有人遇到过同样的问题，请告诉我..

请找到工作小提琴here

Answer 1

您需要做一些事情。

1. 您需要index 可折叠部分，以便它们在它们所在的行中是唯一的。这样，您就可以遍历中继器并为每个水果设置一个不同的部分。
2. 然后在可折叠部分重复每个“季节”。您需要对年份数据进行透视，以便跨列动态显示年度数据
3. 然后您需要更改数据以折叠显示在行中的“汇总”总值，否则仅显示第一条记录，假设第一条记录始终为“全部”类型.
4. 您还需要强制每个部分的每个列宽相同（或至少一致），否则如果没有适当的样式，它可能看起来不整洁。

这是一个fiddle，其中包含一些更改。它使用 div 而不是 table，因为现在更容易创建。您可以调整样式以使其符合您的要求。