我可以在 angularJS v1 中每次使用 ng 重复项两个吗?

Can I use ng-repeat items by two each time in angularJS v1?

本文关键字：两个 ng v1 angularJS 我可以      更新时间：2023-09-26

所以我在使用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

看看那个链接

我猜你正在使用基于col col-50的离子.

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>

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

1.

  <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;
}

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

您可以在显示对象之前对其进行操作。 这有点笨拙，我不推荐它。 也许在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>
相关文章：