twitter-bootstrap –ngng重复的angular.js条件标记

<div class="row">
  <div class="span4">...</div>
  <div class="span4">...</div>
  <div class="span4">...</div>
</div>
<div class="row">
  etc...

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

编辑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@L_673_16@将如下所示：

<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/