使用 ng-repeat 创建 AngularJS 表答案

【问题标题】：AngularJS Table creation with ng-repeat使用 ng-repeat 创建 AngularJS 表
【发布时间】：2014-10-12 09:31:03
【问题描述】：

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

"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"
              }
            }
          ]
        }
      ]
    }
  ]

现在我想使用 colspan 创建一个这样的表。谁能帮助我使用 ng-repeat 和 angularjs 做到这一点？无法弄清楚如何动态合并这些列。到目前为止，我设法使用 flatten array 选项完成了最后一部分。

【问题讨论】：

标签： javascript angularjs html-table angularjs-ng-repeat

【解决方案1】：

要解决这个问题，大部分时间您需要在<td> 中使用ng-repeat 而不是<tr>。除此之外，围绕您的对象进行解析并以您想要的方式对齐它们只是相当繁琐的工作。

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

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

【讨论】：

您好，谢谢您的回答。我想知道是否可以使用 colspan 制作解决方案。但是这个看起来也很棒！
不客气！如果您愿意，可以使用 colspan，只需确保您的 ng-repeat 放置在正确的单元格中。 :)

【解决方案2】：

虽然在这个解决方案中我必须添加一些 JavaScript 方法，但我仍然希望看到更好的解决方案并接受作为答案。 DEMO

<!DOCTYPE html>
<html ng-app = "demo">

  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller = "demoCtrl">
    <h1>Hello Plunker!</h1>

    <br>

    <table>

        <tr>
         <td>Class name</td>
         <td colspan="{{lengthCount(r)}}"  ng-repeat ="r in response"  >
           {{r.Name}}
         </td>
      </tr>

    <tr>
         <td>Group name</td>
         <td colspan="{{gr.Students.length}}"  ng-repeat ="gr in Groups"  >
           {{gr.Name}}
         </td>
      </tr>
      <tr>
         <td>Student name</td>
         <td  ng-repeat ="st in Studs"  >
           {{st.Name}}
         </td>
      </tr>
      <tr>
         <td>Maths</td>
         <td  ng-repeat ="st in Studs"  >
           {{st.Performance.Math}}
         </td>
      </tr>
       <tr>
         <td>Physics</td>
         <td  ng-repeat ="st in Studs"  >
           {{st.Performance.Physics}}
         </td>
      </tr>
       <tr>
         <td>English</td>
         <td  ng-repeat ="st in Studs"  >
           {{st.Performance.English}}
         </td>
      </tr>

    </table>

    <br>



  </body>

</html>

代码放在这里

angular.module("demo",[])
  .controller("demoCtrl", ['$scope', function($scope){
    $scope.response = response;

        function flattenArray(array, fn) {
        var output = [];
        console.log("<i was flatten here");
        for (var i = 0; i < array.length; ++i) {
            var result = fn(array[i]);
            if (result)
                output = output.concat(result);
        }
        return output;
    }

     $scope.lengthCount = function(obj) {
        var k = 0;
        console.log("<i was flatten here");
        for (var i = 0; i < obj.Groups.length; ++i) {
           k= k+ obj.Groups[i].Students.length;
        }
        return k;
    }

       $scope.Groups = flattenArray($scope.response, function (item) {
            console.log("<i was here");

            return item.Groups;
        });
       $scope.Studs = flattenArray($scope.Groups, function (item) {
            console.log("<i was here");

            return item.Students;
        });


  }]);

var 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"
              }
            }
          ]
        }
      ]
    }
    ]

【讨论】：