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