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

Question

我试图找出如何使用ng-repeat指令动态创建带有angular.js类的row-fluid bootstrap行div。

这是角度：

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

Answer 2

作为安东尼给出的答案的改进，我会说使用切片方法可以省去很多麻烦，而不是经历所有这些条件。

尝试按以下方式定义过滤器：

module.filter('group', function() {
    return function(items, groupItems) {
        if (items) {
            var newArray = [];

            for (var i = 0; i < items.length; i+=groupItems) {
                if (i + groupItems > items.length) {
                    newArray.push(items.slice(i));
                } else {
                    newArray.push(items.slice(i, i + groupItems));
                }
            }

            return newArray;
        }
    };
});

在那之后你可以调用控制器上的过滤器，正如安东尼在他的回答中指出的那样：

function Controller ($scope) {
    $scope.itemsGrouped = $filter('group')(itemsArray, 5);
}

Answer 3

关闭主题：使用bootstrap你可以将class =“span6 well”的div放入一个bigass行，因为它们会很好地堆叠。 （你也会得到一个响应式布局）。 很抱歉，如果它只是bootstrap无法处理的行为的示例。 安东尼和雷米吉奥是对的; 你必须创建一个额外的模块载体，它将生成沉浸在ng重复标签中的div。