遍历分层数据以在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仅适用于数据数组。 您希望它遍历数据对象，这将无法正常工作。 您需要更改数据结构，或为层次结构的每个级别对模板进行硬编码。