AngularJS - 如何使用 ng-repeat 重复列表中的每 2 个项目？答案

【问题标题】：AngularJS - how to repeat every 2 items in a list with ng-repeat?AngularJS - 如何使用 ng-repeat 重复列表中的每 2 个项目？
【发布时间】：2018-08-17 22:16:55
【问题描述】：

我正在使用 AngularJS 1.5.3

我有一个想要在视图中显示的项目列表。每 2 个项目我想在第一个项目下显示一个新的 div。

  <div class="col text-center" ng-repeat="event in weekDay.events">
    &nbsp;<small>{{ event.times }}</small>
  </div>

例如，这是我想看到的结果：

我不确定如何使用 ng-repeat 做到这一点。

【问题讨论】：

你至少可以旋转图像..jesus..
@ZombieChowder 也许这正是他想要的：文本向上，行现在是列
@AlekseySolovey 肯定...
不，抱歉图片应该旋转。
@user1261710：请检查我的回答。

标签： javascript angularjs angularjs-ng-repeat

【解决方案1】：

你为什么没有引导程序来做呢？

<div class="row">
  <div class="col-xs-6 text-center" ng-repeat="event in weekDay.events">
    &nbsp;<small>{{ event.times }}</small>
  </div>
</div>

【讨论】：

我使用的是 ionic 1.3.5
@VickyGonsalves 如果不是文本，我会在里面放图像，它们会相互重叠（每行），我要添加什么来保持它们分开？
@AlekseySolovey 使图像对 div 具有响应性。请注意，OPs 问题与 DOM 结构有关。他没有具体提到他想怎么玩这个数组。
@VickyGonsalves 确实 class="img-responsive" 效果很好，我之前曾使用过 width="100%"，但如果不是 col-xs-6 限制，小图像会被拉伸

【解决方案2】：

您可以使用 $index 来获取 ng-repeat 循环中当前项目的索引。然后您可以检查当前的 $index 是否为 odd 如果是，那么您可以显示您的 div。您的代码应如下所示：

<div class="col text-center" ng-repeat="event in weekDay.events">
    &nbsp;<small>{{ event.times }}</small>
    <div class="my-new-div" ng-if="$index%2==1">
       <span>My div stuffs</span>
    </div>
</div>

【讨论】：

我认为有内置版本ng-if="$odd"（或$even）

【解决方案3】：

我同意其他答案，即使用 css 在每行中放置 2 个项目更简单，但如果您不想这样做，可以尝试以下操作

获取事件中的项目数除以每行中要显示的项目数（在本例中为 2）

  $scope.getNumber = function() {
    console.log($scope.data.length / 2)
    if($scope.data.length % 2 == 0)
      return new Array($scope.data.length / 2);
    else
      return new Array(Math.floor($scope.data.length/2) + 1);   
  }

并修改您的 ng-repeat 以在每次迭代中显示当前和下一个项目

<div ng-repeat="item in getNumber() track by $index">
    <span>{{data[$index * 2]}}</span> &nbsp;&nbsp;
    <span>{{data[$index * 2 + 1]}}</span>
</div>

Demo

【讨论】：

【解决方案4】：

使用下面的代码。它会工作

<div class="col text-center" ng-repeat="event in weekDay.events">
        <div ng-show="$index%2==0">
            &nbsp;<small>{{ event.times }}</small>
            &nbsp;<small>{{ weekDay.events[$index+1].times }}</small>
        </div>
    </div>

请检查下面的小工作示例。

!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body ng-app="app" ng-controller="ctrl">
<div ng-repeat="event in weekDay.events" style="border:1px solid black">
    <div ng-show="$index%2==0">
        {{event.times}}
        {{weekDay.events[$index+1].times}}
    </div>

</div>

<script src="../lib/angular.js"></script>
<script>
    var app = angular.module('app', []);
    app.controller('ctrl', function ($scope) {

        $scope.weekDay = {
            "events": [
                { "times": "one", "day": "1" },
                { "times": "two", "day": "2" },
                { "times": "three", "day": "3" },
                { "times": "four", "day": "4" },
                { "times": "five", "day": "5" },
                { "times": "six", "day": "6" },
                { "times": "seven", "day": "7" },
                { "times": "eight", "day": "8" },
            ]
        };

    });
</script>

【讨论】：