迭代分层数据以在 AngularJS 中创建一个扁平的表视图

Question

我正在尝试使用 AngularJS 创建有效的表格标记，但不知道该怎么做。我看到过类似的问题，但没有一个专门满足我的需求。

我有一些比赛结果数据存储在如下结构中：

{
    "date": "1900-01-01",
    "venue": "Venue",
    "results": {
        "10k": {
            "freestyle": {
                "male": [
                    "...a bunch of individual racer results"
                ],
                "female": [
                    "...a bunch of individual racer results"
                ]
            },
            "classical": {
                "male": [
                    "...a bunch of individual racer results"
                ],
                "female": [
                    "...a bunch of individual racer results"
                ]
            }
        },
        "5k": {
            "freestyle": {
                "male": [
                    "...a bunch of individual racer results"
                ],
                "female": [
                    "...a bunch of individual racer results"
                ]
            },
            "classical": {
                "male": [
                    "...a bunch of individual racer results"
                ],
                "female": [
                    "...a bunch of individual racer results"
                ]
            }
        }
    }
}

所以它的结构是：距离、风格、性别、个人赛车手。

我可以将这些结果呈现到单独的表格中，如下所示：

<div ng-show="race.results" ng-cloak>
        <div ng-repeat="(dist, styles) in race.results">
                <div ng-repeat="(style, genders) in styles">
                        <div ng-repeat="(gender, finishers) in genders">
                                <table class="raceResultsTable">
                                        <tr>
                                                <th class="raceEvent" colspan="6">
                                                        <h3 class="tableHeading" id="{{ dist|createKey }}_{{ style|createKey }}_{{ gender|createKey }}_results">{{ dist }} {{ style }} {{ gender }}</h3> <a href="#result_index" class="backToTop" title="Back to results index">&#65514;</a>
                                                </th>
                                        </tr>
                                        <tr>
                                                <th><strong>Place</strong></th>
                                                <th><strong>Name</strong></th>
                                                <th><strong>Age</strong></th>
                                                <th><strong>Age Group</strong></th>
                                                <th><strong>Time</strong></th>
                                                <th><strong>Pace</strong></th>
                                        </tr>
                                        <tr ng-repeat="racer in finishers | orderObjectBy:'place'">
                                                <td>#{{ racer.place }}</td>
                                                <td>{{ racer.name }}</td>
                                                <td>{{ racer.age }}</td>
                                                <td>{{ racer.age_group }}</td>
                                                <td>{{ racer.time }}</td>
                                                <td>{{ racer.pace }}/k</td>
                                        </tr>
                                </table>
                                <p></p>
                        </div><!-- genders -->
                </div><!-- styles -->
        </div><!-- distances -->
</div><!-- show/hide -->

这会创建很多额外的标记来促进迭代，但它确实有效。我遇到的问题是我想在顶部有一个索引。最初它只是每个表中 H3 的 ID 的一行锚点。那工作得很好。但是，现在我想包含导出链接以及指向页面表的链接，并让所有内容对齐我想将其放入表中，但我不确定如何执行此操作。要将每一行放在同一个表中，需要在本质上是“虚拟”元素上使用多个 ng-repeat 迭代器，但我不知道我能做到这一点并在 <table> 内生成有效标记。

理想情况下，我可以做类似...

<tr ng-repeat="(dist, (style, (gender, finishers) in genders) in styles) in race.results">
  <td><a href="#{{dist}}_{{style}}_{{gender}}_results">{{dist}} {{style}} {{gender}}</a></tr>
  <td><a href="#" class="download">CSV</a></td>
</tr>

AngularJS 要求其所有逻辑都附加到 DOM 元素意味着它需要生成不必要的标记。我看到一个关于创建“指令”的参考，这对我来说看起来很陌生。我并不反对学习 AngularJS 的来龙去脉，但这让我觉得应该是直截了当的东西。在像 Twig 这样的模板系统中，这将是一件轻而易举的事，但我觉得我将不得不跳很多圈才能使用 AngularJS 完成此任务。

是否有一种不涉及控制器内部所有逻辑的简单方法？如果指令方法是唯一的选择，那就这样吧，但我认为这是对 AngularJS 和我追求它的兴趣的巨大标记。

Answer 1

您最大的问题是 ng-repeat 仅适用于数据数组。您希望它遍历数据对象，这是行不通的。您需要更改数据结构，或为每个层次结构对模板进行硬编码。