html - Angular.js 使用引导程序并动态创建行

Question

我试图弄清楚如何使用指令动态创建带有类bootstrap的行 div 。row-fluidangular.jsng-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>

Answer 2

作为对 Anthony 给出的答案的改进，我想说使用 slice 方法而不是经历所有这些条件可以为自己省去很多麻烦。

尝试按如下方式定义您的过滤器：

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;
        }
    };
});

之后，您可以调用控制器上的过滤器，正如 Anthony 在他的回复中指出的那样：

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

Answer 3

题外话：使用引导程序，您可以将 class="span6 well" 的 div 放入一个 bigass 行，因为它们会很好地堆叠。（您也将获得响应式布局）。抱歉，这只是引导程序无法处理的行为示例。安东尼和雷米吉奥是对的；您必须创建一个额外的模块车辆，它将生成沉浸在您的 ng 重复标签中的 div。