javascript - 带有串联 ng-repeat 的表中表

Question

在网络应用程序(使用 AngularJs)中，我有一个包含 2 组对象的大数组。每一个，都有一个子数组。我想要做的是显示一个表格，其中第一行包含 foodName 和 totalCount，即所有 foodCount 的总和的子数组。这是整个对象:

        $scope.allData = [
        { 
          foodName: "Apple",
          totalCount: 7,
          avaiable: [
              {
                foodType: "Big",
                foodCount: 4
              }, {
                foodType: "Small",
                foodCount: 3
              }
            ] // end avaiable
        },{
          foodName: "Milk",
          totalCount: 11,
          avaiable: [
              {
                foodType: "Big",
                foodCount: 2
              }, {
                foodType: "Medium",
                foodCount: 7
              }, {
                foodType: "Small",
                foodCount: 2
              }
            ] // end avaiable

        }];

这就是我所做的:https://plnkr.co/edit/cLvQBYuA3ZwtH5m4gmd7?p=preview

这是我所期望的:

(不要关心第一个空列，因为我必须添加一个图标)。

我本来想做 2 次 ng-repeat，但它不起作用。为什么？

Answer 1

下面的 HTML 应该没问题

<table class="display projects-table table table-striped table-bordered dataTable no-footer" cellspacing="0" width="100%" role="grid" aria-describedby="example_info" style="width: 100%;">
  <thead>
    <tr role="row">
      <th class="details-control sorting_disabled" rowspan="1" colspan="1" aria-label="" style="width: 26px;">
        <th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Projects: activate to sort column descending" aria-sort="ascending" style="width: 306px;">Foods</th>
        <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label=" EST: activate to sort column ascending" style="width: 84px;"><i class="fa fa-fw fa-user text-muted hidden-md hidden-sm hidden-xs"></i> Type</th>
        <th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Contacts: activate to sort column ascending" style="width: 107px;">Count</th>
    </tr>
  </thead>
  <tbody ng-repeat="data in allData">
    <tr>
      <td></td>
      <td>{{data.foodName}}</td>
      <td></td>
      <td>{{data.totalCount}}</td>
    </tr>
    <tr ng-repeat="a in data.avaiable">
      <td></td>
      <td></td>
      <td>{{a.foodType}}</td>
      <td>{{a.foodCount}}</td>
    </tr>
  </tbody>
  <tfoot></tfoot>
</table>

Demo Plunkr