嵌套行（行跨度？）在 ng-repeat 中？答案

【问题标题】：Nested Rows (Rowspan?) Within ng-repeat?嵌套行（行跨度？）在 ng-repeat 中？
【发布时间】：2017-06-20 23:32:38
【问题描述】：

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

<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 为“正常”时显示 WarnResult 和 CritResult）。看起来我可能想使用 rowspan，或者可能使用 ng-repeat-start 和 ng-repeat-stop 的东西，但我无法看到解决方案。

【问题讨论】：

你能创建一个简单的plnkr.co吗？

标签： angularjs html-table

【解决方案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>

【讨论】：