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只适用于数据数组。您希望它迭代数据对象，这是不可行的。您需要更改数据结构，或者为每个层次结构对模板进行硬编码。

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

1 个答案: