Search code examples
javascripthtmlangularjsjsonangularjs-ng-repeat

Multiple levels in ng-repeat-start not working

I want to use ng-repeat-start to build a table looking like this:

enter image description here

I have a JSON like this:

[
  {
    "name": "Chapter 1",
    "parts": [
      {
        "text": "Lorem ipsum... 1",
        "subparts": []
      },
      {
        "text": "Lorem ipsum... 2",
        "subparts": []
      }
    ]
  },
  {
    "name": "Chapter 2",
    "parts": [
      {
        "text": "Lorem ipsum... 1",
        "subparts": []
      }
    ]
  },
  {
    "name": "Chapter 3",
    "parts": [
      {
        "text": "Lorem ipsum... 1",
        "subparts": [
          "Sub 1",
          "Sub 2"
        ]
      }
    ]
  }
]

and my table looks like this:

  <table>
    <tr ng-repeat-start="(chapter_index, chapter) in integrity_data">
      <td>
        {{chapter_index + 1}}
      </td>
      <td colspan="2">
        {{chapter.name}}
      </td>
    </tr>
    <tr ng-repeat-end ng-repeat-start="(part_index, part) in chapter.parts">
      <td>
        {{chapter_index + 1}}.{{part_index + 1}}
      </td>
      <td colspan="2">
        {{part.text}}
      </td>
    </tr>
    <tr ng-repeat-end ng-repeat-start="(subpart_index, subpart) in part.subparts"">
      <td></td>
      <td>
        {{chapter_index + 1}}.{{part_index + 1}}.{{subpart_index + 1}}
      </td>
      <td>
        {{subpart}}
      </td>
    </tr>
    <tr ng-repeat-end ng-hide="true"></tr>
  </table>

My problem is that the third level (subparts) does not show:

enter image description here

Any idea how to solve this?

Solution

  • Found the answer myself. I removed the ng-repeat-end from <tr ...>:s and added two more <tr ng-repeat-end ng-hide="true"></tr> in the bottom

        <table>
      <tr ng-repeat-start="(chapter_index, chapter) in integrity_data">
        <td class="integrity-chapter-number integrity-chapter-title">
          {{chapter_index + 1}}
        </td>
        <td class="integrity-chapter-title" colspan="2">
          {{chapter.name}}
        </td>
      </tr>
      <tr ng-repeat-start="(part_index, part) in chapter.parts">
        <td  class="integrity-chapter-number integrity-chapter-text">
          <span ng-if="chapter.parts.length > 1">{{chapter_index + 1}}.{{part_index + 1}}</span>
        </td>
        <td class="integrity-chapter-text" colspan="2">
          {{part.text}}
        </td>
      </tr>
      <tr ng-repeat-start="(subpart_index, subpart) in part.subparts"">
        <td class="integrity-chapter-text"></td>
        <td class="integrity-chapter-number integrity-chapter-text">
          {{chapter_index + 1}}.{{part_index + 1}}.{{subpart_index + 1}}
        </td>
        <td class="integrity-chapter-text">
          {{subpart}}
        </td>
      </tr>
      <tr ng-repeat-end ng-hide="true"></tr>
      <tr ng-repeat-end ng-hide="true"></tr>
      <tr ng-repeat-end ng-hide="true"></tr>
    </table>