Angular 表中的嵌套行

Question

我有一个这样的 JSON 数组：

[
  {
    "students": {
      "Student1": {
        "number": "15",
        "books": {
          "Mystery": [
            "Book1",
            "Book2"
          ]
        }
      },
      "Student2": {
        "number": "12",
        "books": {
          "Romance": [
            "Book1"
          ],
          "Adventure": [
            "Book1",
            "Book2"
          ]
        }
      },
      "Student3": {
        "number": "116",
        "books": {
        }
      }
    },
    "class": "7th Grade",
    "school": "High School 1"
  }
]

我想通过以下方式在 Angular1 页面上将此数据显示为表格：

如何使列相互调整大小，以及如何根据需要嵌套 ng-repeats？

我尝试在 student, student-number, and books 列内嵌套表，并在 books 列内的表内创建一个表，但对齐总是关闭，我无法获得 "No Books" 的默认值如果 "books" 字段为空，则显示。

这是我迄今为止尝试过的Plunkr。

Answer 1

我选择创建隐藏的嵌套表格，以便在点击时显示更多信息。

Answer 2

一种可能的解决方案是通过float:left将几个表（基于$scope.base、$scope.students、$scope.books 数组，在控制器中计算）组合成一个虚拟的、所需的表@（以确保它们位于一个排）。行的停靠是通过设置他们的style:height 来提供的，这取决于他们的孩子的数量。由于具有rowspan 属性的表格的复杂html标记，直接解决方案将非常复杂。我还添加了第二项 (items.push(items[0]))，以证明该解决方案适用于多个项目。

angular.module('app', [])
.controller('MyController', ['$scope', function($scope) {
    var items = [
    {
      "students": {
        "Student1": {
          "number": "15",
          "books": {
            "Mystery": [
              "Book1",
              "Book2"
            ]
          }
        },
        "Student2": {
          "number": "12",
          "books": {
            "Romance": [
              "Book1"
            ],
            "Adventure": [
              "Book1",
              "Book2"
            ]
          }
        },
        "Student3": {
          "number": "116",
          "books": {
          }
        },
        "class": "7th Grade",
        "school": "High School 1"
      }
    }
  ];
  items.push(items[0]);
   
   $scope.base = [];
   $scope.students = [];
   $scope.books = [];
   for(var item of items){
      var temp = $scope.books.length;
      for(var student in item.students){
        if(['class', 'school'].indexOf(student) == -1){
           var studentV = item.students[student];
           $scope.students.push({name:student, number: studentV.number, w: Object.keys(studentV.books).length || 1});
           for(var book in studentV.books)
              $scope.books.push((book + ':' + JSON.stringify(studentV.books[book])).replace(/"/g, ''));       
           if(Object.keys(studentV.books).length == 0)
             $scope.books.push('No books');
        }
      } 
      $scope.base.push({cl: item.students.class, school: item.students.school, w: $scope.books.length - temp});
   }
   
}]);

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
table.left, table.left th, table.left td {
    border-right: 0px
}
tr {
  text-align:center
}

<script src="//code.angularjs.org/snapshot/angular.min.js"></script>

<div ng-app='app' ng-controller="MyController">           
  <table style='float:left;border-right:0' class='left'>
      <thead>
        <tr>
          <th>School</th>
          <th>Class</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat='item in base' style='height:{{item.w*30}}px'>
          <td>{{item.school}}</td>
          <td>{{item.cl}}</td>
        </tr>
      </tbody>
  </table>

  <table style='float:left' class='left'>
      <thead>
        <tr>
          <th>Student</th>
          <th>Student-number</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat='item in students' style='height:{{item.w*30}}px'>
          <td>{{item.name}}</td>
          <td>{{item.number}}</td>
        </tr>
      </tbody>
  </table>

  <table>
      <thead>
        <tr>
          <th>Books</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat='item in books track by $index' style='height:30px'>
          <td>{{item}}</td>
        </tr>
      </tbody>
  </table>

</div>