嵌套行（Rowspan？）在ng-repeat中？

Question

以下图片由以下代码生成：

<div class="row" ng-show="result">
            <div class="col-sm-12">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Group</th>
                            <th>Status</th>
                            <th>Result</th>
                            <th>Computations</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="r in result | orderBy:'-WarnResult.Value' | filter: { Status: 'warning'}">
                            <td>
                                {
                                <span ng-repeat="(k, v) in r.WarnResult.Group">
                                    {{k}}={{v}}<span ng-hide="$last">,</span>
                                </span>
                                }
                            </td>
                            <td ng-bind="r.Status"></td>
                            <td>
                                <pre ng-bind="json(r.WarnResult.Value)"></pre>
                            </td>
                            <td>
                                <table class="table table-striped table-condensed">
                                    <tbody>
                                        <tr ng-repeat="c in r.WarnResult.Computations">
                                            <td ng-bind="c.Text"></td>
                                            <td ng-bind="c.Value"></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        <tr ng-repeat="r in result | orderBy:'-CritResult.Value' | filter: { Status: 'normal'}">
                            <td>
                                {
                                <span ng-repeat="(k, v) in r.CritResult.Group">
                                    {{k}}={{v}}<span ng-hide="$last">,</span>
                                </span>
                                }
                            </td>
                            <td ng-bind="r.Status"></td>
                            <td>
                                <pre ng-bind="json(r.CritResult.Value)"></pre>
                                <pre ng-bind="json(r.WarnResult.Value)"></pre>
                            </td>
                            <td>
                                <table class="table table-striped table-condensed">
                                    <tbody>
                                        <tr ng-repeat="c in r.CritResult.Computations">
                                            <td ng-bind="c.Text"></td>
                                            <td ng-bind="c.Value"></td>
                                        </tr>
                                    </tbody>
                                </table>
                                <table class="table table-striped table-condensed">
                                    <tbody>
                                        <tr ng-repeat="c in r.WarnResult.Computations">
                                            <td ng-bind="c.Text"></td>
                                            <td ng-bind="c.Value"></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

我想把结果（Pre框中的东西）与它们相应的计算对齐（当Status为'normal'时，想法是WarnResult和CritResult都显示）。看起来好像我想使用rowspan，或者可能使用ng-repeat-start和ng-repeat-stop，但我在查看解决方案时遇到了麻烦。

Answer 1

决定将重复移动到tbody，这允许我每次迭代有两行。

<table class="table">
    <thead>
        <tr>
            <th>Group</th>
            <th>Status</th>
            <th>Expression</th>
            <th>Result</th>
            <th>Computations</th>
        </tr>
    </thead>
    <tbody ng-repeat="r in result | orderBy:'-status_number'">
        <tr>
            <td rowspan="2">
                {
                <span ng-repeat="(k, v) in r.CritResult.Group">
                    {{k}}={{v}}<span ng-hide="$last">,</span>
                </span>
                }
            </td>
            <td rowspan="2" ng-bind="r.Status"></td>
            <td>critical</td>
            <td>
                <pre ng-bind="json(r.CritResult.Value)"></pre>
            </td>
            <td>
                <table class="table table-striped table-condensed">
                    <tbody>
                        <tr ng-repeat="c in r.CritResult.Computations">
                            <td ng-bind="c.Text"></td>
                            <td ng-bind="c.Value"></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
            <td>warning</td>
            <td>
                <pre ng-bind="json(r.WarnResult.Value)"></pre>
            </td>
            <td>
                <table class="table table-striped table-condensed">
                    <tbody>
                        <tr ng-repeat="c in r.WarnResult.Computations">
                            <td ng-bind="c.Text"></td>
                            <td ng-bind="c.Value"></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>