Question

在一个Web应用程序（使用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

这是我的预期：

（不要关心第一个empy列，因为我必须添加一个图标）。

我应该做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

Answer 2

这与使用plunker的给定图像完全吻合

https://plnkr.co/edit/fT0rsg23VIdPS7H58rEO?p=preview

<tbody ng-repeat="data in allData" style="border:0px">
    <tr role="row">
        <td if="$index==0" rowspan="4" style="border:0px"></td>
        <td >{{ data.foodName }}</td>
        <td>
        </td>
        <td>{{ data.totalCount }}</td>
    </tr>
    <tr ng-repeat="item in data.avaiable">
        <td ng-if="$index == 0" rowspan="{{data.avaiable.length}}"></td>
        <td>{{ item.foodType }}</td>
        <td>{{ item.foodCount }}</td>
    </tr>
</tbody>

带有连接ng-repeat的表格中的表格

2 个答案: