使用Bootstrap和AngularJS，是否有办法水平ng-repeat为每个设定数量的元素添加一个新行？
我一直在玩ng-class来完成这个 Fiddle ，但问题是我无法在初始行div中获得浮动左div。 ..有任何想法，我是不是在想某件事，或者最好是用指令来完成？
这是我的代码（上面的小提琴链接中的实例）：
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<div ng-repeat="num in numbers"
ng-class="{'row': ($index)%2==0, 'col-md-6': ($index)%2!=0}">
<div ng-class="{'col-md-6': ($index)%2==0}">
{{num}}
</div>
</div>
</div>
</body>
var myApp = angular.module('myApp', [])
.controller('MyCtrl', function ($scope) {
$scope.numbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
});
.row {
clear: both;
width: 100%;
border: 1px solid red;
}
.col-md-6 {
width: 50%;
float: left;
border: 1px solid blue;
}
答案 0 :(得分：9)
如果你正在使用Bootstrap 3和AngularJS，你可以声明一个新的过滤器，它将返回一个子数组切片数组，然后进行两次ng-repeat。
看起来像这样：
<div class="row" ng-repeat="row in filtered = (arr | splitArrayFilter:3)">
<div class="col-md-4" ng-repeat="n in row">
<h3>{{n}}</h3>
</div>
</div>
app.filter('splitArrayFilter', function() {
return function(arr, lengthofsublist) {
if (!angular.isUndefined(arr) && arr.length > 0) {
var arrayToReturn = [];
var subArray=[];
var pushed=true;
for (var i=0; i<arr.length; i++){
if ((i+1)%lengthofsublist==0) {
subArray.push(arr[i]);
arrayToReturn.push(subArray);
subArray=[];
pushed=true;
} else {
subArray.push(arr[i]);
pushed=false;
}
}
if (!pushed)
arrayToReturn.push(subArray);
console.log(JSON.stringify(arrayToReturn));
return arrayToReturn;
}
}
});
你可以在Plunker上找到它：http://plnkr.co/edit/rdyjRtZhzHjWiWDJ8FKJ?p=preview 由于某种原因，plunker中的视图不支持bootstrap 3列，但如果您在嵌入式视图或浏览器中打开它，您可以看到它的工作原理。
答案 1 :(得分：6)
你使用ng-class做的很聪明。我从来没有想过在那里的表达式中使用%2。
但是为了将来参考，有一种更容易实现的方法：ng-class-even和ng-class-odd。它与你正在做的事情做同样的事情，但只是更清洁一点：
<div ng-repeat="num in numbers" ng-class-even="'md-col-6'" ng-class-odd="'row'">
{{num}}
</div>
但这并不能解决您的问题。如果我理解正确，您需要一行，该行中有两列。我能想到的最简单的方法是拆分数组。将重复放在div上，然后在span内有2 div。我认为您最初遇到的一个问题是您重复了一个div，并尝试将该block元素视为inline
控制器
myApp.controller('MyCtrl', function ($scope) {
$scope.evens = ["2","4","6","8","10","12","14"];
$scope.odds = ["1","3","5","7","9","11","13"];
});
HTML
<div ng-controller="MyCtrl">
<div ng-repeat="odd in odds" class="row">
<span class="span3">{{odd}}</span>
<span class="span2">{{evens[$index]}}</span>
</div>
</div>
<强> Fiddle
由于您使用的是1.1.5版本，因此您还可以使用新的指令：ng-if！您还可以使用ng-switch来执行某些条件逻辑显示。
你没有在你的小提琴中包含bootstrap，由于某种原因我无法让jsFiddle显示bootstrap。所以我创建了一些临时CSS类，它们有点类似于bootstraps class="span"
答案 2 :(得分：3)
无需添加.row类..我这样做了：
<强> HTML：
<div ng-repeat="product in allProducts">
<div class="my-col-50">
<h1>{{product.title}}</h1>
</div>
</div>
<强> CSS：
.my-col-50{float:left;width:50%;}
它的工作就像一个魅力。
答案 3 :(得分：2)
虽然这不是＆＃34;正确的＆＃34;这样做的方法是，有一种方法可以使用CSS来实现这一点。
例如，这适用于3列布局：
HTML：
<div class="row">
<div ng-repeat="(key, pod) in stats.pods" class="pod-wrap">
<div ng-if="objectCheck(pod) == false" class="col-md-4 col-sm-4 pod">
<div>
<h2 ng-bind="key"></h2>
<p class="total" ng-bind="pod | number"></p>
</div>
</div>
<div ng-if="objectCheck(pod) == true" class="col-md-4 col-sm-4 pod">
<div>
<h2 ng-bind="key"></h2>
<div ng-repeat="(type, value) in pod track by $index">
<p class="status"><% type %> <small><% value %></small></p>
</div>
</div>
</div>
</div>
</div>
CSS：
.pod-wrap:nth-of-type(3n):after {
display: table;
content: '';
clear: both;
}
答案 4 :(得分：2)
我尝试了两个给出的建议...... yshaool的那个工作正常，但就像我评论它给我的无限循环错误。
然后我尝试了类似下面的内容：
<div class="row" ng-repeat="row in split($index, 3, row.Attempts)">
<div class="col-md-4" ng-repeat="attempt in row">
<div>Attempt {{row.AttemptNumber}}</div>
<div>{{row.Result}}</div>
</div>
</div>
和功能：
$scope.split = function (index, length, attempts) {
var ret = attempts.slice(index * length, (index * length) + length);
console.log(JSON.stringify(ret));
return ret;
}
正在某个地方
<div ng-repeat="attempt in row.Attempts">
<div class="col-md-4">
<div>Attempt {{attempt.AttemptNumber}}</div>
<div>{{attempt.Result}}</div>
</div>
</div>
使用“col-md-4”可以解决问题，因为我只需要每行使用三列进行拆分。 （让bootstrap完成工作！） 无论如何，这里的其他答案真的很有用......
答案 5 :(得分：1)
根据模板中所需的列数，在控制器中创建原始数据源的块。
$scope.categories = data //contains your original data source;
$scope.chunkedCategories = [] //will push chunked data into this;
//dividing into chunks of 3 for col-4. You can change this
while ($scope.categories.length > 0)
$scope.chunkedCategories.push($scope.categories.splice(0, 3));
在您的模板中，您现在可以执行以下操作
<div class="row" ng-repeat="categories in chunkedCategories">
<div class="col-xs-4" ng-repeat="category in categories">
<h2>{{category.title}}</h2>
</div>
</div>
答案 6 :(得分：1)
我的方法是使用$ index变量，该变量由AngularJS在ng-repeat指令中创建和更新，以触发对CSS clearfix hack的调用，而后者又重置为新行。
我使用的是以下版本：AngularJS 1.5.5和Bootstrap 3.3.4
<!-- use bootstrap's grid structure to create a row -->
<div class="row">
<!-- Cycle through a list: -->
<!-- use angular's ng-repeat directive -->
<div ng-repeat="item in itemList">
<!-- Start a new row: -->
<!-- use the css clearfix hack to reset the row -->
<!-- for every item $index divisible by 3. -->
<!-- note that $index starts at 0. -->
<div ng-if="$index % 3 == 0" class="clearfix"></div>
<!-- Create a column: -->
<!-- since we want 3 "item columns"/row, -->
<!-- each "item column" corresponds to 4 "Bootstrap columns" -->
<!-- in Bootstrap's 12-column/row system -->
<div class="col-sm-4">
{{item.name}}
</div>
</div>
</div>
答案 7 :(得分：0)
为了保持解决方案bootstrap格式化，我使用ng-class
解决了这个问题<div ng-repeat="item in items">
<div ng-class="{ 'row': ($index + 1) % 4 == 0 }">
<div class="col-md-3">
{{item.name}}
</div>
</div>
</div>