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。