AngularJS:table rowspan dynamic

knsnq2tg  于 2023-03-22  发布在  Angular
关注(0)|答案(1)|浏览(306)

我想知道如何在angularJS中用ng-repeat显示一个表,像这样:

colspan为4的行后有4列,依此类推。
我的代码从数据htmlAngular 返回数据库

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

使用ng-repeat simple。
ng-repeat table dinamyc

vxf3dgd4

vxf3dgd41#

你可以使用一个容器来循环元素,然后重复第一个tr,并添加第二个有colspan的tr

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

相关问题