我试图弄清楚如何使用bootstrap指令使用row-fluidangular.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/

10-09 05:40
查看更多