我试图弄清楚如何使用bootstrap
指令使用row-fluid
和angular.js
类动态创建ng-repeat
行div。
这是 Angular :
<div ng-repeat="task in tasks" class="row-fluid">
<div class="span6 well">{{task.name}}</div>
</div>
虽然这样做不能起作用。我希望生成的
bootstrap
html是:http://jsfiddle.net/YKkXA/2/
基本上,我需要在ng-repeat内执行索引的mod 2,如果索引为0,请关闭
</div>
并创建一个新的<div class="row-fluid">
。这怎么可能? 最佳答案
这个想法是过滤您的项目以便对它们进行分组,并制作另一个ngRepeat
来迭代子项目。
首先,将该过滤器添加到您的模块中:
module.filter('groupBy', function() {
return function(items, groupedBy) {
if (items) {
var finalItems = [],
thisGroup;
for (var i = 0; i < items.length; i++) {
if (!thisGroup) {
thisGroup = [];
}
thisGroup.push(items[i]);
if (((i+1) % groupedBy) === 0) {
finalItems.push(thisGroup);
thisGroup = null;
}
}
if (thisGroup) {
finalItems.push(thisGroup);
}
return finalItems;
}
};
});
在您的 Controller 中(因为如果直接在模板中进行过滤,则将有一个$digest loop):
function TaskCtrl() {
$scope.tasksGroupBy2 = $filter('groupBy')(taskGroup, 2);
}
并在您的
.html
中:<div ng-repeat="taskGroup in tasksGroupBy2" class="row-fluid">
<div ng-repeat="task in taskGroup" class="span6 well">{{task.name}}</div>
</div>
关于html - Angular.js使用 bootstrap 并动态创建行,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14748449/