javascript - 按小数点对表格单元格进行分组

Question

根据小数点对表格单元格进行分组。

Plunker

示例 JSON:

[
    {
        "data1": [
            {
                "name": "Download",
                "id": "1.1.1"
            },
            {
                "name": "Download",
                "id": "1.1.2"
            },
            {
                "name": "Download",
                "id": "1.2"
            },
            {
                "name": "Download",
                "id": "1.3"
            },
            {
                "name": "Download",
                "id": "1.4"
            }
        ]
    },
    {
        "data2": [
            {
                "name": "Download",
                "id": "2.1"
            },
            {
                "name": "Download",
                "id": "2.2"
            }
        ]
    },
    {
        "data3": [
            {
                "name": "Download",
                "id": "3.1.1"
            },
            {
                "name": "Download",
                "id": "3.1.2"
            },
            {
                "name": "Download",
                "id": "3.2"
            }
        ]
    },
    {
        "data4": [
            {
                "name": "Download",
                "id": "4.1.1"
            },
            {
                "name": "Download",
                "id": "4.1.2"
            }
        ]
    }
]

HTML:

<table border="0" class="table table-bordered">
    <tbody ng-repeat="(key,result) in results">
    <tr ng-repeat="r in result['data'+[key+1]]">
        <td rowspan="5">{{r.id}}</td>
    </tr>
    </tbody>
</table>

使用 ng-repeat 在表格的单个单元格中显示每个 ID。

实际结果:

预期结果

因为 ng-repeat 单元格彼此相邻显示。预期结果是使用小数点划分表格单元格。

示例:

第 1 行 =>1.1.1、1.1.2、1.2、1.3、1.4

第 2 行 =>2.1、2.2

第 2 行的第一个单元格 (2.1) 应采用第 1 行的宽度(1.1.1 和 1.1.2)。而2.2应该取1.2、1.3、1.4剩下的宽度

提前致谢。

Answer 1

你的数据结构不清晰，看来需要审查和重构。 但现在这个 plunker 可以帮助你。 (我希望!)

link:

plunker