我使用angular.js和(为了参数的缘故)引导.现在我需要迭代“事物”并将它们显示在“行”中：
<div class="row"> <div class="span4">...</div> <div class="span4">...</div> <div class="span4">...</div> </div> <div class="row"> etc...
现在,我可以用三角形关闭我的.row div吗？我试过ui – 如果从角度,但即使没有这样做.
如果我使用服务器端渲染,我会做这样的事情(这里的JSP语法,但并不重要)：
<div class="row>
<c:forEach items="${things}" var="thing" varStatus="i">
<div class="span4">
..
</div>
<%-- Here is the trick:--%>
<c:if test="${i.index % 3 == 2}">
</div><div class="row">
</c:if>
</c:forEach>
</div>
注意,我需要在这里改变DOM,而不仅仅是css隐藏的元素.我试着在.row和.span4 divs上重复一遍,没有用.
解决方法
编辑2013年11月12日
似乎不仅在1.2中有角度变化,而且还有一个更好的方法.我创建了两个过滤器.我试图把它们组合成一个但是有消化错误.以下是两个过滤器：
.filter("mySecondFilter",function(){
return function(input,row,numColumns){
var returnArray = [];
for(var x = row * numColumns; x < row * numColumns + numColumns; x++){
if(x < input.length){
returnArray.push(input[x]);
}
else{
returnArray.push(""); //this is used for the empty cells
}
}
return returnArray;
}
})
.filter("myFilter",numColumns){
var filtered = [];
for(var x = 0; x < input.length; x++){
if(x % numColumns === 0){
filtered.push(filtered.length);
}
}
return filtered;
}
});
现在html将如下所示：
<table border="1">
<tr data-ng-repeat="rows in (objects | myFilter:numColumns)">
<td data-ng-repeat="column in (objects | mySecondFilter:rows:numColumns)">{{ column.entry }}</td>
</tr>
</table>
jsFiddle：http://jsfiddle.net/W39Q2/
编辑2013年9月20日
在处理需要动态列的大量数据的同时,我提出了一个更好的方法.
HTML：
<table border="1">
<tr data-ng-repeat="object in (objects | myFilter:numColumns.length)">
<td data-ng-repeat="column in numColumns">{{ objects[$parent.$index * numColumns.length + $index].entry }}</td>
</tr>
</table>
使用Javascript：
$scope.objects = [ ];
for(var x = 65; x < 91; x++){
$scope.objects.push({
entry: String.fromCharCode(x)
});
}
$scope.numColumns = [];
$scope.numColumns.length = 3;
新过滤器
.filter("myFilter",columns){
var filtered = [];
for(var x = 0; x < input.length; x+= columns){
filtered.push(input[x]);
}
return filtered;
}
});
这使它变得动态.要更改列,只需更改numColumns.length.在js小提琴中,你可以看到我把它连接到一个下拉菜单.
jsFiddle：http://jsfiddle.net/j4MPK/
您的html标记将如下所示：
<div data-ng-repeat="row in rows">
<div data-ng-repeat="col in row.col">{{col}}</div>
</div>
然后,您可以在控制器中创建一个变量：
$scope.rows = [
{col: [ 1,2,3,4 ]},{col: [ 5,6,7 ]},{col: [ 9,10,11,12 ]}
];
这样,您可以拥有任意数量的列.
jsfiddle http://jsfiddle.net/rtCP3/39/
jsfiddle：http://jsfiddle.net/rtCP3/41/
html现在看起来像这样：
<div class="row" data-ng-repeat="row in rows">
<div class="col" data-ng-repeat="col in cols">
{{objects[$parent.$index * numColumns + $index].entry}}
</div>
</div>
然后在控制器我有：
$scope.objects = [
{entry: 'a'},{entry: 'b'},{entry: 'c'},{entry: 'd'},{entry: 'e'},{entry: 'f'},{entry: 'g'},{entry: 'h'}
];
$scope.numColumns = 3;
$scope.rows = [];
$scope.rows.length = Math.ceil($scope.objects.length / $scope.numColumns);
$scope.cols = [];
$scope.cols.length = $scope.numColumns;
$scope.numColumns变量用于指定每行中所需的列数.
要处理动态数组大小更改,请注意数组的长度(不是整个数组,这将是冗余的)
$scope.numColumns = 3;
$scope.rows = [];
$scope.cols = [];
$scope.$watch("objects.length",function(){
$scope.rows.length = Math.ceil($scope.objects.length / $scope.numColumns);
$scope.cols.length = $scope.numColumns;
});
jsfiddle：http://jsfiddle.net/rtCP3/45/