AngularJS - 如何使用多个 ng-repeat-end

Question

我试图了解如何使用多个ng-repeat-end's。

我有一个表格，显示了 20 年的数据，分为 5 年的块。

表中的每一行都显示了 5 年的数据。这就是我展示前 1-5 年的方式。

<table>
    <tbody>
        <tr ng-repeat="history in HistoryCategory.Category[key]">
            <th>{{ history.CompanyName }} 1-5 years</th>
            <td ng-repeat="mycredits in history.Histories.slice(0, 5)" ng-switch="mycredits.Status">
                <span ng-switch-when="0">Some text</span>
                <span ng-switch-when="1">Some text</span>
                <span ng-switch-when="2">Some text</span>
                <span ng-switch-when="3">Some text</span>
                <span ng-switch-when="4">Some text</span>
                <span ng-switch-when="null">null</span>
                <span ng-switch-default>Error</span>
            </td>                
        </tr>
    </tbody>
</table>
<div ng-repeat-end class="scroll-btns">
    <div class="scroll-btns">
        <div class="scroll-left icon-left" ng-click="scrollLeft()"></div>
        <div class="scroll-right icon-right" ng-click="scrollRight()"></div>
    </div>
</div>

在表格的底部是一个DIVwith class scroll-btns.. 所有这些都是允许上面的表格可以滚动并显示一些向左/向右移动的图标。

我现在想要做的是展示第 6-10、11-15 和 16-20 年（在同一张表中）。我试过了：

<table>
    <tbody>
        <tr ng-repeat-start="history in HistoryCategory.Category[key]">
            <th>{{ history.CompanyName }} 1-5 years</th>
            <td ng-repeat="mycredits in history.Histories.slice(0, 5)" ng-switch="mycredits.Status">
                <span ng-switch-when="0">Some text</span>
                <span ng-switch-when="1">Some text</span>
                <span ng-switch-when="2">Some text</span>
                <span ng-switch-when="3">Some text</span>
                <span ng-switch-when="4">Some text</span>
                <span ng-switch-when="null">null</span>
                <span ng-switch-default>Error</span>
            </td>
            <td ng-repeat="emptyCell in getEmptyCells(history.Histories.slice(0, 5).length)"></td>
        </tr>
        <tr ng-repeat-end>
            <th>6 - 10 years</th>
            <td ng-repeat="mycredits in history.Histories.slice(5, 10)" ng-switch="mycredits.Status">
                <span ng-switch-when="0">Some text</span>
                <span ng-switch-when="1">Some text</span>
                <span ng-switch-when="2">Some text</span>
                <span ng-switch-when="3">Some text</span>
                <span ng-switch-when="4">Some text</span>
                <span ng-switch-when="null">null</span>
                <span ng-switch-default>Error</span>
            </td>      
        </tr>
        <tr ng-repeat-end>
            <th>11 - 15 years</th>
            <td ng-repeat="mycredits in history.Histories.slice(10, 15)" ng-switch="mycredits.Status">
                <span ng-switch-when="0">Some text</span>
                <span ng-switch-when="1">Some text</span>
                <span ng-switch-when="2">Some text</span>
                <span ng-switch-when="3">Some text</span>
                <span ng-switch-when="4">Some text</span>
                <span ng-switch-when="null">null</span>
                <span ng-switch-default>Error</span>
            </td> 
        </tr>
    </tbody>
</table>
<div ng-repeat-end class="scroll-btns">
    <div class="scroll-btns">
        <div class="scroll-left icon-left" ng-click="scrollLeft()"></div>
        <div class="scroll-right icon-right" ng-click="scrollRight()"></div>
    </div>
</div>

有了上面的内容，我看到了 ng-repeat-start/end 错误，并且文本 6-10years 和 11-15years 没有显示。

但是，如果我只有一个 ng-repeat-end（例如 6-10 年）而不是第二个，则应用程序会按预期显示。

---

**** 解决 ****

通过有 2 个标签解决……一个是ng-repeat-start，另一个是 ng-repeat-end。标签ng-repeat-end包含 5 年以上的所有行。

Answer 1

这个

<tr ng-repeat-start="item in items"></tr>
<tr></tr>
<tr></tr>
<tr ng-repeat-end></tr>

将为每个项目提供四个 tr。