Rows within a row in Angular JS table with ng-repeat

Question

I have a table like so. Within each program, I have multiple forms. Each form has a name, a Default YES/NO field (the tick mark if yes) and a status field ACTIVE/INACTIVE.

The problem is however that my current code messes up the alignment. The red lines indicate all the items that should be aligned in a single row.

My code is as follows:

<div class="scrollContainer">
<div class="fixedHeaderSection">
    <table class="table columnHeadings" style="table-layout: fixed">
        <tbody>
        <tr>
            <td class="col-md-4 col-sm-4 col-xs-4">
                Program
            </td>
            <td class="col-md-4 col-sm-4 col-xs-4">
                Forms
            </td>
            <td class="col-md-1 col-sm-1 col-xs-1">
            </td>
            <td class="col-md-3 col-sm-3 col-xs-3">
                Status
            </td>
        </tr>
        </tbody>
    </table>
</div>
<div class="scrollableSection">
    <table class="table columnData" style="table-layout: fixed">
        <tr ng-repeat="program in programsList">
            <td style="word-wrap: break-word;" class="col-md-4 col-sm-4 col-xs-4">
                {{program.name}}
            </td>
            <td style="word-wrap: break-word;" class="col-md-4 col-sm-4 col-xs-4">
                <li ng-repeat="form in program.forms" style="list-style:none;">
                    {{form.name}}
                </li>
                + New Form
            </td>
            <td style="word-wrap: break-word;" class="col-md-1 col-sm-1 col-xs-1">
                <li ng-repeat="form in program.forms" style="list-style:none;">
                    <span ng-cloak ng-if="form.default == 'YES'" class="glyphicon glyphicon-ok"></span>
                </li>
            </td>
            <td style="word-wrap: break-word;" class="col-md-3 col-sm-3 col-xs-3">
                <li ng-repeat="form in program.forms" style="list-style:none;">
                    {{form.status}}
                </li>
            </td>
        </tr>
    </table>
</div>

How do I fix this?

Answer 1

If you don't care about restructuring HTML, this might be most simple solution.

<tr ng-repeat="program in programsList">
    <td class="col-md-4 col-sm-4 col-xs-4">
        {{program.name}}
    </td>
    <td class="col-xs-8">
        <div ng-repeat="form in program.forms">
            <div class="col-md-4 col-sm-4 col-xs-4">
                {{form.name}}
            </div>
            <div class="col-md-1 col-sm-1 col-xs-1">
                <span ng-cloak ng-if="form.default == 'YES'" class="glyphicon glyphicon-ok"></span>
            </div>
            <div class="col-md-3 col-sm-3 col-xs-3">
                {{form.status}}
            </div>
        </div>
        <div>
            + New Form
        </div>
    </td>
</tr>

This example might need to be adjust a little bit because this is without test. The point is to use single loop for 'program.forms'.

Answer 2

You can try this. I deleted the li and used "rowspan". You were using 2 tables, so I correct it whit using only one (thead + tbody)

<div class="scrollContainer">
        <table class="table columnHeadings" style="table-layout: fixed">
        <div class="fixedHeaderSection">
        <thead>
        <tr>
            <th class="col-md-4 col-sm-4 col-xs-4">
                Program
            </th>
            <th class="col-md-4 col-sm-4 col-xs-4">
                Forms
            </th>
            <th class="col-md-1 col-sm-1 col-xs-1">
            </th>
            <th class="col-md-3 col-sm-3 col-xs-3">
                Status
            </th>
        </tr>
        </thead>
        </div>
        <tbody>
        <div class="scrollableSection">

        <tr ng-repeat="program in programsList">
            <td rowspan="program.forms.length" style="word-wrap: break-word;" class="col-md-4 col-sm-4 col-xs-4">
                {{program.name}}
            </td>
            <td ng-repeat="form in program.forms" style="word-wrap: break-word;" class="col-md-4 col-sm-4 col-xs-4">
                {{form.name}}
                + New Form
            </td>
            <td ng-repeat="form in program.forms" style="word-wrap: break-word;" class="col-md-1 col-sm-1 col-xs-1">
                <span ng-cloak ng-if="form.default == 'YES'" class="glyphicon glyphicon-ok"></span>
            </td>
            <td ng-repeat="form in program.forms" style="word-wrap: break-word;" class="col-md-3 col-sm-3 col-xs-3">
                {{form.status}}
            </td>
        </tr>

        </div>
        </tbody>
    </table>

Answer 3

The problem is most likely that you want your li elements to be aligned in the 'correct' rows. But this is not guaranteed in any way, because long li texts will get broken down, and the list in the next column cannot know about this.

You should consider adding further rows to your table for every form in a program and use rowspan or something on the first column.

Its kinda messy but should get it done.

Link to a "working" plnkr : http://plnkr.co/edit/Q9Ikmo3GVvtm3MdYlPNY?p=preview

  <table class="table columnData" style="table-layout: fixed" border="1">
    <tr ng-repeat-start="program in programsList">
      <td style="word-wrap: break-word;" class="col-md-4 col-sm-4 col-xs-4" rowspan="{{program.forms.length + 1}}">
        {{program.name}}
      </td>
      <td style="word-wrap: break-word;" class="col-md-4 col-sm-4 col-xs-4">
        + New Form
      </td>
      <td style="word-wrap: break-word;" class="col-md-1 col-sm-1 col-xs-1">
      </td>
      <td style="word-wrap: break-word;" class="col-md-3 col-sm-3 col-xs-3">
      </td>
    </tr>
    <tr ng-repeat-end ng-repeat="form in program.forms">
      <td>
        {{form.name}}
      </td>
      <td><span ng-cloak ng-if="form.default == 'YES'" class="glyphicon glyphicon-ok"></span></td>
      <td>{{form.status}}</td>
    </tr>
  </table>