如何用AngularJS的ng-repeat实现带动态rowspan的表格？

根据你的需求，要实现「跨列行→普通数据行」循环的表格布局，可以通过AngularJS的ng-repeat-start和ng-repeat-end指令直接实现，或者对数据分组后渲染，以下是两种方案：

方案1：单条数据对应一组（跨列行+数据行） #

如果需要每条数据前都显示一个跨列标题行，直接用ng-repeat-start和ng-repeat-end指令，让单个循环生成两行元素：

<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-start="base in list">
            <!-- colspan数值需与表格总列数匹配，此处表头为5列，所以设为5 -->
            <td colspan="5">{{base.num_protocolo}} - {{base.interessado}}</td>
        </tr>
        <!-- 数据行，循环结束标记 -->
        <tr ng-repeat-end>
            <td class="center">
                <span class="btn-group">
                    <button type="button" id="btn{{base.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>

方案2：每4条数据对应一组（跨列行+4行数据） #

如果需要每4条数据前显示一个跨列标题行，先在控制器中对数据分组：

// 在你的AngularJS控制器中添加分组逻辑
$scope.groupedData = [];
const groupSize = 4; // 每组包含4条数据
for (let i = 0; i < $scope.list.length; i += groupSize) {
    $scope.groupedData.push({
        // 自定义组标题，可根据业务调整
        groupTitle: `组 ${Math.floor(i/groupSize) + 1}`,
        items: $scope.list.slice(i, i + groupSize)
    });
}

再修改模板渲染分组后的数据：

<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="group in groupedData">
            <td colspan="5">{{group.groupTitle}}</td>
        </tr>
        <!-- 渲染组内数据行 -->
        <tr ng-repeat="base in group.items">
            <td class="center">
                <span class="btn-group">
                    <button type="button" id="btn{{base.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>

内容的提问来源于stack exchange，提问作者Braga