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.

Screenshot of table

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?

beware li without ul stackoverflow.com/questions/2031725/… — daremachine
– daremachine, Commented Mar 30, 2015 at 8:25
Can you please provide an example plnkr or jsfiddle. I cant replicate what you are describing. — Jonathan
– Jonathan, Commented Mar 30, 2015 at 8:27
Other than the messy li without ul, I don't see any issues. Are you sure the data is working correctly? Maybe your problem isn't layout, but the data is being passed to the wrong scope object? Put up a jsfiddle with a controller and actual data. Here is a template jsfiddle you can fork, if it helps. jsfiddle.net/v015227L — deitch
– deitch, Commented Mar 30, 2015 at 8:29
@geekchic You can remove the lis and add a new table inside second td. Heres a plunkr — anpsmn
– anpsmn, Commented Mar 30, 2015 at 8:48

Jonathan · Accepted Answer · 2015-03-30 08:42:21Z

2

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>

edited Mar 30, 2015 at 8:42

answered Mar 30, 2015 at 8:32

Jonathan

3,6543 gold badges23 silver badges30 bronze badges

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

1 Comment

geekchic Over a year ago

This would work, but I was hoping there might be a simpler solution I'm missing.

Weedoze · Accepted Answer · 2015-03-30 08:42:29Z

1

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>

edited Mar 30, 2015 at 8:42

answered Mar 30, 2015 at 8:35

Weedoze

14k2 gold badges38 silver badges65 bronze badges

2 Comments

Jonathan Over a year ago

I think the two tables are intended, fixedHeader and scrollSection give a hint.

Jonathan Over a year ago

The forms get displayed as columns in your code rather than as rows.

yazaki · Accepted Answer · 2015-03-30 08:49:45Z

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'.

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related