我可以在 angularJS v1 中每次使用两个 ng-repeat 项目吗？答案

【问题标题】：Can I use ng-repeat items by two each time in angularJS v1?我可以在 angularJS v1 中每次使用两个 ng-repeat 项目吗？
【发布时间】：2016-04-21 22:06:53
【问题描述】：

所以我在使用 ng-repeat 将两个数组项放在一个 div 标签内时遇到了很多麻烦。尝试了几件事，但无法弄清楚。您可以在下面看到我正在尝试实现的布局...任何帮助都会很棒！

angular.module('starter', [])

.controller('PeopleCtrl', function($scope) {
  $scope.people = [

    {
      image: "https://placehold.it/350x150",
      dob: "23/06/1990"
    }, {
      image: "https://placehold.it/350x150",
      dob: "12/12/2000"
    }, {
      image: "https://placehold.it/350x150",
      dob: "12/12/1972"
    }

  ]

  angular.forEach($scope.people, function(value, key) {
    var dateParts = $scope.people[key].dob.split("/");
    var date = new Date(dateParts[2], (dateParts[1] - 1), dateParts[0]);
    $scope.people[key].dob = date;
  })

});

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-app="starter" ng-controller="PeopleCtrl">


  <!-- I want to put 2 people in a row. Then the next 2 people in a row... -->

  <div class="row" ng-repeat="person in people | orderBy:'-dob'">

    <div class="col col-50">
      <img ng-src="{{person.image}}">
      <p>{{person.dob | date : 'dd MMM yyyy'}}</p>
    </div>

    <!-- Here I want the next item in the array, not the same one. -->
    <div class="col col-50">
      <img ng-src="{{person.image}}">
      <p>{{person.dob | date : 'dd MMM yyyy'}}</p>
    </div>

  </div>

</body>

我应该提到我正在使用 ionic 的网格。 http://ionicframework.com/docs/components/#grid

【问题讨论】：

为什么不在每隔一个项目之后拆分？也许类似于：
。你可以以任何你喜欢的方式使用它。
ng-repeat 内部有一个名为$index 的变量。您可以利用这一点以及ng-if 有条件地输出 div

标签： javascript angularjs html angularjs-scope

【解决方案1】：

看看link

我猜你正在使用基于 col col-50 的 ionic。

angular.module('starter', [])

.controller('PeopleCtrl', function($scope) {
  $scope.people = [

    {
      image: "https://placehold.it/350x150",
      dob: "23/06/1990"
    }, {
      image: "https://placehold.it/350x150",
      dob: "12/12/2000"
    }, {
      image: "https://placehold.it/350x150",
      dob: "12/12/1972"
    }

  ]

  angular.forEach($scope.people, function(value, key) {
    var dateParts = $scope.people[key].dob.split("/");
    var date = new Date(dateParts[2], (dateParts[1] - 1), dateParts[0]);
    $scope.people[key].dob = date;
  })

});

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>




</head>

<body ng-app="starter" ng-controller="PeopleCtrl">


  <!-- I want to put 2 people in a row. Then the next 2 people in a row... -->
  <div class="row" style="
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
">
  <div class="col col-50" ng-repeat="person in people | orderBy:'-dob'">

    <div >
      <img ng-src="{{person.image}}">
      <p>{{person.dob | date : 'dd MMM yyyy'}}</p>
    </div>

   

  </div>
</div>

</body>

【讨论】：

【解决方案2】：

有两种方法可以解决这个问题；

  <div class="row" ng-repeat="person in people | orderBy:'-dob'">
      <div class="col col-50">
      <img ng-src="{{person.image}}">
      <p>{{person.dob | date : 'dd MMM yyyy'}}</p>
    </div>
    <div data-ng-show="$index % 2 == 0">My Seperator</div>
</div>

或：

<br ng-if="!(($index + 1) % 2)" />

或者用css：

<div class="section">
    <div ng-repeat="person in people | orderBy:'-dob'">
      <img ng-src="{{person.image}}">
      <p>{{person.dob | date : 'dd MMM yyyy'}}</p>
    </div>
  </div>

.section > div:nth-of-type(2n+1){
  clear:both;
}

【讨论】：

【解决方案3】：

你不能只给包含 col 的 div，一个 6 的 col，它会加起来 12（引导程序的最大宽度）并开始一个新行。

【讨论】：

【解决方案4】：

您可以在显示对象之前对其进行操作。这有点hacky，我不推荐它。也许有更多 CSS 经验的人可以推荐一个纯 CSS 版本。

//put two people per array inside $scope.people
$scope.people2 = [];
while($scope.people.length) {
    $scope.people2.push($scope.people.splice(0,2));
}

然后在你的 HTML 中，你可以这样做：

<div>
    <div class="row" ng-repeat="2people in people2">
        <div ng-repeat="person in 2people">{{person}}</div>
    </div>
</div>

【讨论】：