AngularJS-如何使用ng-repeat重复列表中的每2个项目？
[英]AngularJS - how to repeat every 2 items in a list with ng-repeat?
问题描述
I am using AngularJS 1.5.3 
我正在使用AngularJS 1.5.3
I have a list of items that I want to display in my view. 我有一个要在视图中显示的项目列表。 Every 2 items I want to show a new div underneath the first one. 我想每2个项目在第一个项目下方显示一个新的div。
<div class="col text-center" ng-repeat="event in weekDay.events">
<small>{{ event.times }}</small>
</div>
For example, this is the result I want to see: 例如，这是我想看到的结果：
I am not sure how I can do this with ng-repeat. 我不确定如何使用ng-repeat做到这一点。
4 个解决方案
解决方案1
2 2018-03-09 10:57:48
Why don't you have bootstrap to do it ? 您为什么没有引导程序来做呢？
<div class="row">
<div class="col-xs-6 text-center" ng-repeat="event in weekDay.events">
<small>{{ event.times }}</small>
</div>
</div>
解决方案2
0 2018-03-09 11:09:25
You can use $index to get the index of current item in your ng-repeat loop. 您可以使用$ index在ng-repeat循环中获取当前项目的索引。 Then you can check if the current $index is odd if so then your can display your div. 然后，您可以检查当前的$ index是否为奇数，如果是，则可以显示div。 Your code should look like this: 您的代码应如下所示：
<div class="col text-center" ng-repeat="event in weekDay.events">
<small>{{ event.times }}</small>
<div class="my-new-div" ng-if="$index%2==1">
<span>My div stuffs</span>
</div>
</div>
解决方案3
0 2018-03-09 12:35:42
I agree with other answers that say it is simpler to use css to place 2 items in each row, but if you don't want to do that you can try the following 我同意其他回答，即使用css在每行中放置2个项目更简单，但是如果您不想这样做，可以尝试以下操作
get number of items in your events divided by number of items you want to display in each row (in this case 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);
}
and modify your ng-repeat to display current and next item in each iteration 并修改您的ng-repeat以在每次迭代中显示当前项目和下一个项目
<div ng-repeat="item in getNumber() track by $index">
<span>{{data[$index * 2]}}</span>
<span>{{data[$index * 2 + 1]}}</span>
</div>
解决方案4
0 2018-03-09 12:50:02
Use this below code. 使用下面的代码。 it will work 它会工作
<div class="col text-center" ng-repeat="event in weekDay.events">
<div ng-show="$index%2==0">
<small>{{ event.times }}</small>
<small>{{ weekDay.events[$index+1].times }}</small>
</div>
</div>
Please check this below small working example. 请在下面的小示例中检查此内容。
!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.