nested table using ng-repeat

Question

What I'm trying to do is repeat three levels.

Demo: http://plnkr.co/edit/qXLcPHXDlOKZYI5jnCIp?p=preview

<table>
  <thead>
    <tr>
      <td>Block</td>
      <td>Column</td>
      <td>Unit</td>
      <td>Action</td>
    </tr>
  </thead>
  <tbody ng-repeat="block in building.ownBlock">
    <tr ng-repeat="column in block.ownColumn">
      <td>{{block.name}}</td>
      <td>{{column.number}}</td>
      <td>{{unit.name}} - ? empty</td>
      <td><button ng-click="edit(unit)">Edit</button></td>
    </tr>
  </tbody>
</table>

but I have failed to do so.

Collection

$scope.building =
{
  id: 1,
  name: 'first',
  ownBlock: [
      {
        id: 1,
        name: 'Block 1',
        ownColumn: [
            {
              id: 1,
              number: 'Column 1-1',
              ownUnit: [
                  {
                    id: 1,
                    number: 'Unit 1-1-1'
                  },
                  {
                    id: 2,
                    number: 'Unit 1-1-2'
                  }
                ]
            },
            {
              id: 2,
              number: 'Column 1-2',
              ownUnit: [
                  {
                    id: 3,
                    number: 'Unit 1-2-3'
                  },

                  {
                    id: 4,
                    number: 'Unit 1-2-4'
                  }
                ]
            }
          ]
      },
      {
        id: 2,
        name: 'Block 2',
        ownColumn: [
            {
              id: 3,
              number: 'Column 2-3',
              ownUnit: [
                  {
                    id: 5,
                    number: 'Unit 2-3-5'
                  },
                  {
                    id: 6,
                    number: 'Unit 2-3-6'
                  }
                ]
            },
            {
              id: 4,
              number: 'Column 2-4',
              ownUnit: [
                  {
                    id: 7,
                    number: 'Unit 2-4-7'
                  },

                  {
                    id: 8,
                    number: 'Unit 2-4-8'
                  }
                ]
            }
          ]
      }
    ]
};

Using KnockoutJS I could use virtual repeaters eg.

<!-- ko foreach: items -->
    <li data-bind="text: $data"></li>
<!-- /ko -->

I coded a directive, but 'ng-click="edit(unit)"' just doesn't work. Maybe because I'm using element.replaceWith(html); to replace the directive HTML.

Any help is much appreciated. Thank you

The problem is that you are trying to do a 3d display in a 2d table. Since ownUnit is another array, you could so something like {{column.ownUnit[0].number}}, but you can't display all of the units without doing something different. — Zack Argyle
– Zack Argyle, Commented Nov 19, 2013 at 3:04

Zack Argyle · Accepted Answer · 2013-11-19 03:07:59Z

11

You could try something like this, depending on the steady state of your models.

<body>

<table>
  <thead>
    <tr>
      <td>Block</td>
      <td>Column</td>
      <td ng-repeat="unit in building.ownBlock[0].ownColumn[0].ownUnit[0]">Unit</td>
      <td>Action</td>
    </tr>
  </thead>
  <tbody ng-repeat="block in building.ownBlock">
    <tr ng-repeat="column in block.ownColumn">
      <td>{{block.name}}</td>
      <td>{{column.number}}</td>
      <td ng-repeat="unit in column.ownUnit">{{unit.number}} - ? empty</td>
      <td><button ng-click="edit(unit)">Edit</button></td>
    </tr>
  </tbody>
</table>
<pre>
  {{toedit|json}}
</pre>

answered Nov 19, 2013 at 3:07

Zack Argyle

8,4674 gold badges32 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Diego Vieira Over a year ago

Hi Zack, thanks for that, but ownUnit is also an array. I end up doing a ng-repeat on a table instead. Check this out: plnkr.co/edit/ANL2h4rDXifRXHCYhNIr?p=preview

Diego Vieira Over a year ago

Zack, I used ng-hide to head the header, it's not perfect, but does the job, check this out: plnkr.co/edit/b3S6HuijA6TrxgUGSJv7?p=preview

Brett Christensen · Accepted Answer · 2013-11-19 04:46:08Z

4

you will want to use the new ng-repeat-start and ng-repeat-end directives which were added in Angular 1.2. see the doco for examples.

http://docs.angularjs.org/api/ng.directive:ngRepeat

answered Nov 19, 2013 at 4:46

Brett Christensen

1612 silver badges4 bronze badges

2 Comments

Diego Vieira Over a year ago

Hi Brett, yeah I saw that, but it didn't worked for my purpose, or I'm missing something? Here is how I tried to accomplish it: plnkr.co/edit/CGMZHjq0uGdQPDy9heR1?p=preview

Diego Vieira Over a year ago

Alright, I manage to hide the header to preven it from repeating using this plnkr.co/edit/b3S6HuijA6TrxgUGSJv7?p=preview

Collectives™ on Stack Overflow

nested table using ng-repeat

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related