AngularJS : table rowspan dynamic

Question

I would like to know how can I display a table with ng-repeat from AngularJS like this:

4 columns after a row with a colspan of 4 and so on.

My code angular return database from data html

<table>
    <thead>
        <tr>
            <th class="min">
                #
            </th>
            <th>Base</th>
            <th>e-mail</th>
            <th>buserd</th>
            <th>access</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="base in list">
            <td class="center">
                <span class="btn-group">
                    <button type="button" id="btn{{pessoa.id_pessoa}}" class="btn btn-default dropdown-toggle"
                        data-toggle="dropdown" aria-expanded="false">
                        <i class="icon-cogs"></i>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" role="menu">
                        <li ng-click="ficha(base)"><a href="javascript:void(0)"><i
                                    class="icon-personalizado fa fa-fw fa-file-text-o"></i>Ficha</a></li>
                        <li ng-click="editar(base)"><a href="javascript:void(0)"><i class="icon-pencil-4"></i>
                                Editar</a></li>
                        <li ng-click="ficha(base)"><a href="javascript:void(0)"><i class="icon-barcode"></i>
                                Imprimir
                            </a></li>
                        <li ng-click="ficha(base)"><a href="javascript:void(0)"><i class="icon-share-alt"></i>
                                despacho</a></li>
                    </ul>
                </span>
            </td>

            <td>
                <span ng-click="ficha(base)" ng-style="{'cursor': 'pointer'}">{{base.num_protocolo}}</span><br>
                <small id="ln{{base.id}}" class="label label-danger"></small>
            </td>
            <td>
                <span>{{base.interessado}}</span>
                <span>{{base.observacoes}}</span>
            </td>
            <td>{{base.data}}</td>
            <td>{{base.assunto}}</td>
        </tr>
    </tbody>
</table>

Used ng-repeat simple.

ng-repeat table dynamic

MiltoxBeyond · Accepted Answer · 2023-03-16 18:18:07Z

0

You can use a container to loop the items and then repeat the first tr and add a second tr that has the colspan. This may not be in the same version of angular but the general idea is like so

<ng-container *ngFor="let base of list; let i = index">
  <tr>
     <!--- Row of base.* //-->
  </tr>
  <tr>
     <td colspan="4">Observations</td>
  </tr>
</ng-container>

answered Mar 16, 2023 at 18:18

MiltoxBeyond

2,7511 gold badge16 silver badges14 bronze badges

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

1 Comment

Braga Over a year ago

thanks, based on your suggestion I came up with the solution in angularJS, ``` <tr ng-repeat-start="base in list"> <td></td> </tr> <tr ng-repeat-end> <td colspan="4" class="margin-td">{{base.observacoes}}</td> </tr> ```

Collectives™ on Stack Overflow

AngularJS : table rowspan dynamic

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related