Question

我正在尝试使用bootstrap指令找出如何使用row-fluid angular.js类动态创建ng-repeat行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 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>

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。

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

3 个答案: