html - Angular.js 使用 Bootstrap 并动态创建行

Question

我想知道如何动态创建 bootstrap类 row-fluid 的行 div与 angular.js使用 ng-repeat指令。

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

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

在你的 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>