テーブルにng-repeatが連結されています

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

これは私が期待したものである：

Iので（最初のempy列を気にしないでくださいアイコンを追加する必要があります）。

私は2 ng-repeatをやっていたと思いましたが、うまくいきません。どうして？ここで

Answer 1

はHTML以下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> 

Answer 2

で指定されたイメージに正確である

<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