如何使用ng-repeat将下面的json解析为如下所示的复杂表结构

Kishore库马尔

`

表格图片链接

`我有一个表结构,如附件中的图像,我的json结构是这样的

我可以将表格形成位置,但由于无法获取位置变量的范围而无法访问路由器详细信息

这个JSON对我来说看起来很复杂,并且无法获得用于按需构建表结构的变量范围。我也尝试在表格内部形成表格,但由于内部表格标记被终止,因此范围也无法使用

请帮助我形成表格结构

[
    {
        "regionName": "Australia",
        "locations": [
            {
                "locationname": "sydney",
                "routers": [
                    {
                        "routername": "S1",
                        "installed": "1",
                        "provisioned": "1",
                        "delata": "2",
                        "maximum": "2"
                    },
                    {
                        "routername": "S2",
                        "installed": "1",
                        "provisioned": "2",
                        "delata": "2",
                        "maximum": "2"
                    }
                ]
            },
            {
                "locationname": "Honkong",
                "routers": [
                    {
                        "routername": "H1",
                        "installed": "1",
                        "provisioned": "8",
                        "delata": "6",
                        "maximum": "9"
                    },
                    {
                        "routername": "Hungeri",
                        "installed": "1",
                        "provisioned": "6",
                        "delata": "5",
                        "maximum": "9"
                    }
                ]
            }
        ]
    },
    {
        "regionName": "India",
        "locations": [
            {
                "locationname": "Banglore",
                "routers": [
                    {
                        "routername": "T1",
                        "installed": "1",
                        "provisioned": "9",
                        "delata": "5",
                        "maximum": "4"
                    },
                    {
                        "routername": "T2",
                        "installed": "1",
                        "provisioned": "6",
                        "delata": "5",
                        "maximum": "9"
                    }
                ]
            },
            {
                "locationname": "Mumbai",
                "routers": [
                    {
                        "routername": "M1",
                        "installed": "1",
                        "provisioned": "6",
                        "delata": "6",
                        "maximum": "9"
                    },
                    {
                        "routername": "M2",
                        "installed": "1",
                        "provisioned": "6",
                        "delata": "5",
                        "maximum": "9"
                    }
                ]
            }
        ]
    }
]

这就是我尝试过的

 <table>
      <thead>
        <th> Regions </th>
        <th> Location </th>
        <th> Routers </th>
      </thead>
      <tbody ng-repeat="regions in finalJson">
            <tr ng-repeat-start="tempLocation in regions.locations"> </tr>
            <tr>
                <td rowspan=""4>{{regions.regionName}}</td>

                <td rowspan="2">
                    <table>
                        <tbody>
                            <tr ng-repeat-start="location in regions.locations">
                                <td> {{location.locationname}}</td>
                            </tr>
                            <tr ng-repeat-end></tr>
                        </tbody>
                    </table>
                </td>

                <td >
                    <table>
                        <tbody ng-repeat="router in tempLocation.routers">
                            <tr>
                                <td>{{router.routername}}</td>
                            </tr>
                        </tbody>
                    </table>
                </td>

            </tr>

            <tr ng-repeat-end></tr> 
        </tbody>
    </table>
沙申克·维维克

这里有一个小样帮你

<table id="customers">
  <thead>
  </thead>
  <tbody>
    <tr>
      <th> Regions </th>
      <th> Location </th>
      <th> Routers </th>
    </tr>
    <tr ng-repeat="data in dataList">
       <td>{{data.regionName}}</td>
       <td>
        <table>
           <tr ng-repeat="location in data.locations">
             <td>{{location.locationname}}</td>
           </tr>
        </table>
       </td>
       <td>
         <table>
           <tr ng-repeat="location in data.locations">
             <td>
               <table>
                  <tr ng-repeat="route in location.routers">
                    <td>{{route.routername}}</td>
                  </tr>
               </table>
             </td>
           </tr>
        </table>
       </td>
    </tr>

  </tbody>
</table>

只需检查css样式,使其看起来与您在代码中看到的样式相似。还要看看是否div有比更好的选择table,取决于您

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

JavaScript,需要J Query帮助,如何将跨度值求和,如下面的HTML所示

如何使用顫振設計下面的用戶界面,如下面的屏幕截圖所示

如何获得特定列的分组输出,如下面的SQL所示?

使用fscanf()读取多个值(如下面的文本文件中所示)

如何使用 HTML、CSS 和 JavaScript 创建一个框来选择大小,如下面的链接所示?

如何将表转换为摘要,如下所示

如何使用for循环创建和填充如下所示的结构?物镜

如何在ng-repeat中使用ng-if?

如何使用Go将JSON文件解析为结构

AngularJS-如何正确使用ng -repeat

如何使用ng-repeat:Angularjs?

如何使用hashmap进行ng-repeat

如何使用嵌套的ng-repeat

如何使用 ng-repeat 限制结果?

如何将字符串转换为int,如下面的示例

AngularJS - 如何对使用 ng-repeat 创建的表进行排序

如何在ng-repeat中使用ng-options绑定<select> ng-model

使用ng-repeat进行数据绑定后如何更改表结构

如何使用 forEach 从 ng-repeat 中删除 json 对象

如何使用ng-repeat遍历JSON中的数组数组?

如何使用ng-repeat深入研究JSON

如何使用angularjs在ng-repeat中打印Json数据?

使用ng-repeat如何从嵌套的JSON对象检索数据

如何使用ng-class-even和ng-class-odd在ng repeat中拆分div结构?

如何使用PHP将JSON解析为html表?

使用boost :: spirit解析为复杂的结构

如何在ng-repeat中使用ng-init将值绑定到变量?

如何使用复杂的对象或json在ng表中添加动态列?

如何使用ng-repeat为表中的每一行设置不同的条件?