Angular.js使用bootstrap并动态创建行

Question

我想弄清楚如何动态地创建bootstrap行的div一类row-fluid与angular.js使用的ng-repeat指令.

这是角度:

 <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">.这怎么可能？

Answer 1

我们的想法是过滤您的项目以便对它们进行分组,然后花一秒钟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;
        }
    };
});

在你的控制器中(因为如果你直接在你的模板中过滤,那么你将有一个$ digest循环):

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>