CODEWITHSUNDEEP
javascriptangularjshtml-tableangularjs-ng-repeat
panagulis72
panagulis72

Reputation: 2169

Table in table with concatenated ng-repeat

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

This is what I expected: enter image description here

(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

Answers (2)

Konkko
Konkko

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

Pankaj Parkar
Pankaj Parkar

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>

Demo Plunkr

Upvotes: 2

Related Questions