Group table cells by decimal points

问题: Group the table cells based on the decimal points. Plunker Sample JSON: [ { "data1": [ { "name": "Download", "...

问题:

Group the table cells based on the decimal points.

Plunker

Sample 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>

using ng-repeat to display each id in single cell of the table.

Actual Result:

enter image description here

Expected Result

enter image description here

Because of ng-repeat the cell are displaying next to each other. The expected result is to divide the table cell using the decimal points.

Example:

Row1 => 1.1.1, 1.1.2, 1.2, 1.3, 1.4

Row2 => 2.1, 2.2

The Row2 first cell(2.1) should take the width of row1(1.1.1 and 1.1.2). And 2.2 should take the rest of the width of 1.2, 1.3 and 1.4

Thanks in advance.


回答1:

your data structure not clear, seems need to review and refactor it. but for now this plunker can help you. (i hope!)

link:

plunker

  • 发表于 2019-01-01 09:00
  • 阅读 ( 210 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除