Reputation: 2169
In a web app (working with AngularJs) I have a big array which contains 2 group of object. Each one, has a sub array. What I want to do is to display a table which contains in the first row the foodName
and the totalCount
, which the sum of the all foodCount
of the sub array. This is the whole object:
$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
}];
This is what I've done: https://plnkr.co/edit/cLvQBYuA3ZwtH5m4gmd7?p=preview
(Don't care about the first empy column because I have to add an icon).
What I supposed was to do 2 ng-repeat, but it doesn't work. Why?
Upvotes: 1
Views: 157
Reputation: 662
Here is exact with the given image with 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>
Upvotes: 1
Reputation: 136194
Below HTML should be fine then
<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>
Upvotes: 2