连接ng-repeat表中的表格

在一个web应用程序（使用AngularJs）中，我有一个包含2组对象的大数组。每一个都有一个子数组。我想要做的是显示一个表，其中包含第一行foodName和totalCount，其中子阵列的所有foodCount的总和。这是整个对象：连接ng-repeat表中的表格

 $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，但它不起作用。为什么？

来源

2016-03-22 panagulis72

这里是确切与给定图像与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>

来源

2016-03-22 22:10:00 Konkko

谢谢你非常非常感谢！我接受了你的回答，因为你速度更快！ – panagulis72

下面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

来源

2016-03-22 22:10:20

连接ng-repeat表中的表格

回答

相关问题