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

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

＆＃13;

items.push(items[0])

＆＃13;

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});
   }
   
}]);

＆＃13;

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
}

＆＃13;

Answer 2

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

Angular Table中的嵌套行

2 个答案: