使用 ng-repeat 创建 AngularJS 表

2023-11-29

我从数据库得到以下响应。关于类数组,其中类嵌套在组中,最后嵌套在学生中。

"Response":[
    {
      "Id":1,"Name":"Class 1","Location":"Building 1","Groups":[
        {
          "Id":1,"Name":"GB1","Students":[
            {
              "Id":1,"Name":"Mike","RollNo":"1","Performance":{
                "Id":1,"Math":"90","Physics":"70","English":"60"
              }
            },{
              "Id":2,"Name":"John","RollNo":"2","Performance":{
                "Id":2,"Math":"90","Physics":"70","English":"60"
              }
            },{
              "Id":3,"Name":"Muffin","RollNo":"3","Performance":{
                "Id":3,"Math":"90","Physics":"90","English":"90"
              }
            }
          ]
        },  {
          "Id":2,"Name":"GB2","Students":[
            {
              "Id":4,"Name":"Ema","RollNo":"1","Performance":{
                "Id":4,"Math":"90","Physics":"70","English":"60"
              }
            },{
              "Id":5,"Name":"Sunny","RollNo":"2","Performance":{
                "Id":5,"Math":"90","Physics":"70","English":"60"
              }
            },{
              "Id":6,"Name":"Jen","RollNo":"3","Performance":{
                "Id":6,"Math":"90","Physics":"90","English":"90"
              }
            }
          ]
        }
      ]
    },{
      "Id":2,"Name":"Class 2","Location":"Building 1","Groups":[
        {
          "Id":3,"Name":"G1","Students":[
            {
              "Id":7,"Name":"Ron","RollNo":"1","Performance":{
                "Id":7,"Math":"90","Physics":"70","English":"60"
              }
            },{
              "Id":8,"Name":"Kaka","RollNo":"2","Performance":{
                "Id":8,"Math":"90","Physics":"70","English":"60"
              }
            },{
              "Id":9,"Name":"Mark","RollNo":"3","Performance":{
                "Id":9,"Math":"90","Physics":"90","English":"90"
              }
            }
          ]
        },  {
          "Id":4,"Name":"G2","Students":[
            {
              "Id":10,"Name":"Lily","RollNo":"1","Performance":{
                "Id":10,"Math":"90","Physics":"70","English":"60"
              }
            },{
              "Id":11,"Name":"Lina","RollNo":"2","Performance":{
                "Id":11,"Math":"90","Physics":"70","English":"60"
              }
            },{
              "Id":12,"Name":"Linda","RollNo":"3","Performance":{
                "Id":12,"Math":"90","Physics":"90","English":"90"
              }
            }
          ]
        }
      ]
    }
  ]

Now I want to create a table like this using colspan. enter image description here Could anyone help me to do this using ng-repeat and angularjs ? can't figure out how to merge this columns dynamically. So far I managed to do last part using flatten array option.


要解决这个问题,您需要ng-repeat在 - 的里面<td>代替<tr>,大部分时间。除此之外,围绕对象进行解析并按照您想要的方式对齐它们是相当乏味的工作。

这是 plnkr:http://plnkr.co/edit/aNVrMa4E8gLkVYlxzdHF?p=preview

我CSS很差。也许你可以为此做点什么。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 ng-repeat 创建 AngularJS 表 的相关文章

随机推荐