html 表格可以解决这个 ng-repeat 问题吗？

Question

好的，所以我有一个假数据集。它试图模仿 Excel 中的表格数据。

function SU(name: String, data: Array<any>) {
    this.name = name,
    this.data = data
};

function Month(month: String, year: String, goal: Number, projection: Number, actual: Number) {
    this.month = month,
    this.year = year,
    this.goal = goal,
    this.projection = projection,
    this.actual = actual,
    this.remaining = function () { return this.goal - this.actual }
};

$scope.Recruitment.ServiceUnits = [
    new SU("SU101",
        [
            new Month("April", "2014", 1, 2, 0),
            new Month("May", "2014", 2, 2, 0),
            new Month("June", "2014", 3, 2, 0),
            new Month("July", "2014", 4, 2, 0),
            new Month("August", "2014", 5, 2, 0),
            new Month("September", "2014", 6, 2, 0),
            new Month("October", "2014", 7, 2, 0),
            new Month("November", "2014", 8, 2, 0),
            new Month("December", "2014", 9, 2, 0),
            new Month("January", "2015", 10, 2, 0),
            new Month("February", "2015", 11, 2, 0),
            new Month("March", "2015", 12, 2, 0),
            new Month("April", "2015", 13, 2, 0),
            new Month("May", "2015", 14, 2, 0),
            new Month("June", "2015", 15, 2, 0),
            new Month("July", "2015", 16, 2, 0),
            new Month("August", "2015", 17, 2, 0),
            new Month("September", "2015", 18, 2, 0)
        ]),
    new SU("SU102",
        [
            new Month("April", "2014", 1, 2, 0),
            new Month("May", "2014", 2, 2, 0),
            new Month("June", "2014", 3, 2, 0),
            new Month("July", "2014", 4, 2, 0),
            new Month("August", "2014", 5, 2, 0),
            new Month("September", "2014", 6, 2, 0),
            new Month("October", "2014", 7, 2, 0),
            new Month("November", "2014", 8, 2, 0),
            new Month("December", "2014", 9, 2, 0),
            new Month("January", "2015", 10, 2, 0),
            new Month("February", "2015", 11, 2, 0),
            new Month("March", "2015", 12, 2, 0),
            new Month("April", "2015", 13, 2, 0),
            new Month("May", "2015", 14, 2, 0),
            new Month("June", "2015", 15, 2, 0),
            new Month("July", "2015", 16, 2, 0),
            new Month("August", "2015", 17, 2, 0),
            new Month("September", "2015", 18, 2, 0)
        ]),
    new SU("SU103",
        [
            new Month("April", "2014", 1, 2, 0),
            new Month("May", "2014", 2, 2, 0),
            new Month("June", "2014", 3, 2, 0),
            new Month("July", "2014", 4, 2, 0),
            new Month("August", "2014", 5, 2, 0),
            new Month("September", "2014", 6, 2, 0),
            new Month("October", "2014", 7, 2, 0),
            new Month("November", "2014", 8, 2, 0),
            new Month("December", "2014", 9, 2, 0),
            new Month("January", "2015", 10, 2, 0),
            new Month("February", "2015", 11, 2, 0),
            new Month("March", "2015", 12, 2, 0),
            new Month("April", "2015", 13, 2, 0),
            new Month("May", "2015", 14, 2, 0),
            new Month("June", "2015", 15, 2, 0),
            new Month("July", "2015", 16, 2, 0),
            new Month("August", "2015", 17, 2, 0),
            new Month("September", "2015", 18, 2, 0)
        ])
];

我将如何使用 ng-repeat 来显示这个？拥有两层标题，并在月份之间交替显示目标、预测、实际和剩余数据。

    <div id="goalData">
    <table>
        <thead>
            <tr>
                <th colspan="4" ng-repeat="data in Recruitment.ServiceUnits[0].data track by $index">{{data.month | limitTo:3}}</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="su in Recruitment.ServiceUnits track by $index">

            </tr>
        </tbody>
        <tfoot>
            <tr></tr>
        </tfoot>
    </table>
</div>

我可以得到第一个标题就好了。第二行标题我不确定，因为我似乎需要一个嵌套的 ng-repeat。

至于正文，我可以很好地完成每一行，但实际上在正确的位置获取表格数据是有问题的。

即使这是表格数据，表格是否不正确？有什么方法可以重组它以使其正常工作，还是我需要开始使用 div 或创建自己的角度指令？

Answer 1

嗯，根据 CozyAzure 发布的链接，我想出了一个解决方案。

我保持数据集不变，但改变了我接近html的方式，如下。

        <table>
        <tr>
            <td>
                &nbsp;
                <table>
                    <tr>
                        <th>SU</th>
                    </tr>
                    <tr ng-repeat="su in Recruitment.ServiceUnits track by $index">
                        <td>{{su.name}}</td>
                    </tr>
                </table>
            </td>
            <td ng-repeat="month in Recruitment.ServiceUnits[0].data track by $index">
                {{month.month | limitTo: 3}}
                <table>
                    <tr>
                        <th>Goal</th>
                        <th>Proj</th>
                        <th>Actl</th>
                        <th>Rmng</th>
                    </tr>
                    <tr ng-repeat="su in Recruitment.ServiceUnits track by $index">
                        <td>{{month.goal}}</td>
                        <td>{{month.projection}}</td>
                        <td>{{month.actual}}</td>
                        <td>{{month.remaining()}}</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

这会产生这种结果

当然需要设置样式。

不幸的是，我现在需要实现固定标题，以便文档可以在标题固定的情况下向下滚动。我想我已经达到了这里表格的限制，因为我读过的所有内容都说这是实现的噩梦，尤其是在我目前的结构中。

Divs 可能是执行一切的更简单的解决方案。尤其是当我需要开始叠加越来越多的效果时。