Javascript 每3项重复一次

使用AngularJS，我正在迭代一个JSON对象，该对象包含一个事件对象数组，其中包含一个竞争对象数组

我希望在表格中显示每个

事件

，然后在

td

中显示每个

比赛

，但每行仅显示三个单元格

我正在使用ng repeat返回每个事件的表列表，但在每三个

将比赛拆分为一个新的

时遇到了问题

除了从JSON重建我自己的大型对象之外，我在Angular中描述的最好的方法是什么

---

当前视图：

<table ng-repeat="listing in listings">
    <tr>
        <th colspan="3">{{listing.name}}</th>
    </tr>
    <tr>
        <td ng-repeat="competition in listing.competitions">
            {{competition.id}} - {{competition.name}}
        </td>
    </tr>
</table>

<table>
    <tr>
        <th colspan="3">Event Name</th>
    </tr>
    <tr>
        <td>competition id - competition name</td>
        <td>competition id - competition name</td>
        <td>competition id - competition name</td>
    </tr>
    <tr>
        <td>competition id - competition name</td>
        <td>competition id - competition name</td>
        <td>competition id - competition name</td>
    </tr>
</table>

app.controller('EventsCtrl', function ($scope, $http) {
  $scope.loading = true;

  $http.get('scripts/JSON/events.json').then(function (response) {
    var listings = response['data'].events;

    $scope.listings = listings;
  });
});

events.json

{
"events": [
    {
        "id": 418,
        "name": "et ullamco",
        "competitions": [
            {
                "id": 933,
                "name": "qui in deserunt occaecat et",
                "startTime": 1381092189
            },
            {
                "id": 853,
                "name": "eu enim ex incididunt do",
                "startTime": 1380708266
            },
            {
                "id": 5738,
                "name": "ad est ut aliquip et",
                "startTime": 1381366623
            },
            {
                "id": 7599,
                "name": "sit ex voluptate aliqua dolor",
                "startTime": 1381284106
            },
            {
                "id": 7481,
                "name": "laborum consequat deserunt do aliqua",
                "startTime": 1380874273
            },
            {
                "id": 3441,
                "name": "amet reprehenderit sint sunt proident",
                "startTime": 1380554850
            },
            {
                "id": 1959,
                "name": "ullamco minim minim in voluptate",
                "startTime": 1380651981
            }
        ]
    },

---

您正在使用一个表，但数据的语义表明您有一个列表列表。应该考虑用<代码> < UL> < LI> <代码>而不是网格来输出。

<ul ng-repeat="listing in listings">
    <li>
        <h2>{{listing.name}}</h2>
        <ul ng-repeat="competition in listing.competitions">
            <li>
              {{competition.id}} - {{competition.name}}
            </li>
        </ul>
    </li>
</ul>

{{listing.name}


{{competition.id}-{{competition.name}

使用上述HTML，您可以很容易地使用CSS实现所需的布局。以推特引导或示例为基础来检查“块网格”。表格通常只用于实际为表格的数据

但是…

您的问题仍然值得回答，因为可能还有其他原因以您建议的方式替换模板。您可以使用一个函数一次获取三个内容：

<table ng-repeat="listing in listings">
    <tr>
        <th colspan="3">{{listing.name}}</th>
    </tr>
    <tr ng-repeat="group in competitions">
        <td ng-repeat="competition in group">
            {{competition.id}} - {{competition.name}}
        </td>
    </tr>
</table>

{{listing.name}
{{competition.id}-{{competition.name}

在控制器中，您可以创建“列表列表”以绑定到嵌套中继器

// Adapted from Fresheyeball's solution

$scope.competitions = []
compSet = []
for(var i; i < $scope.listings.competitions; i++){
   var competition = $scope.listings.competitions[i];
   if( i % 3 ){
      $scope.competitions.push(compSet);
      compSet = [];
   }
   compSet.push(competition);
}

//改编自Freshyeball的解决方案
$scope.competitions=[]
compSet=[]
对于（变量i；i<$scope.listings.competities；i++）{
var competition=$scope.listings.competitions[i]；
如果（i%3）{
$scope.competitions.push（compSet）；
compSet=[]；
}
compSet.push（竞争）；
}

通常，我会使用列表，但不幸的是，我被迫使用预先存在的标记。遗留代码和所有这些…：（我为您添加了另一种解决方案。我确实意识到有时这些事情会迫使您去做。虽然可能有很多方法可以剥除这只猫的皮，但将数组分组可能只是更直接的方法之一。谢谢！尽管如此，我现在遇到了一个

10$digest（）迭代。正在中止！

错误（虽然最终结果是按预期显示的）。这是因为它在数据传递后在视图中运行吗？我开始认为最好在每次摘要检查所有属性（包括函数）后努力更改标记对于变化，如果发现变化，它将再次运行摘要。我猜是看到了不同的东西，但它是微不足道的。我会考虑“FrayHyyLp的解决方案”，它基本上是相同的想法，而不是“GROP3”。函数加载比赛时，您只需将比赛按三个分组。这可能会更好。我已更新解决方案以反映这一点。创建代码集列表的代码似乎有问题。可能类似于

if（I！=0&&！（I%3））