10

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

2
  • @tymeJV it's the child of ownColumn => ownUnit. Commented Nov 19, 2013 at 2:44
  • 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. Commented Nov 19, 2013 at 3:04

2 Answers 2

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>

2
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

2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.