使用引导Angular.js和动态创建行 [英] Angular.js using bootstrap and dynamically creating rows

问题描述

我试图找出如何动态地创建引导行的div类排液与 angular.js 使用 NG-重复指令。

I am trying to figure out how to dynamically create bootstrap row divs with a class of row-fluid with angular.js using the ng-repeat directive.

下面是角：

 <div ng-repeat="task in tasks" class="row-fluid">
     <div class="span6 well">{{task.name}}</div>
 </div>

这确实的不可以工作虽然。在引导 HTML我希望生成的是：

This does not work though. The bootstrap html I wish to generate is:

http://jsfiddle.net/YKkXA/2/

基本上，我需要做索引的MOD 2纳克重复的里面，如果它的0，收出＆LT; / DIV＆GT; 并创建一个新的＆LT; D​​IV CLASS =排液＆GT; 。这怎么可能？

Basically I need to do mod 2 of the index inside of the ng-repeat, and if its 0, close out the </div> and create a new <div class="row-fluid">. How is this possible?

推荐答案

我们的想法是，以过滤项目将它们分组，并进行了第二 ngRepeat 来迭代分项目。

The idea is to filter your items in order to group them, and make a second ngRepeat to iterate on sub-items.

首先，过滤器添加到您的模块：

First, add that filter to your module :

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

在您CONTROLER（因为如果你直接在你的模板过滤器，那么你将有一个 $消化循环）：

In your controler (because if you filter directly in your template, then you will have a $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>

这篇关于使用引导Angular.js和动态创建行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！