Angular.js使用bootstrap和動態創建行

我想弄清楚如何動態創建bootstrap行divs與row-fluid類與angular.js使用ng-repeat指令。Angular.js使用bootstrap和動態創建行

這裏是角：

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

這並不不工作雖然。該bootstrap HTML我希望生成是：

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

基本上，我需要做索引的MOD 2納克重複的裏面，如果它的0，收出</div>並創建一個新<div class="row-fluid">。這怎麼可能？

來源

2013-02-07 Justin

您可以使用預定義變量_ $ index_在_ng-repeat_循環內 – remigio

你能舉一個例子嗎，'$ index'到底能幫到我們多少？我們基本上需要'ng-repeat'中的'if'語句。 – Justin

我看過這個例子，沒有辦法使用_ngRepeat_來做到這一點。你應該寫一個自定義的指令，dinamically創建HTML – remigio

的想法是爲了篩選項目將它們分組，並進行了第二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; 
     } 
    }; 
});

在你CONTROLER（因爲如果你直接在你的模板過濾器，那麼你將有一個$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>

來源

2013-03-19 10:56:13

爲了任何人碰到這個絆腳石，這應該是公認的答案 - 工作就好了我。 – Jascination

，一方面，這避免了使用複雜的指令（在所有的項目，這將NG-重複和創建的行和列動態）。另一方面 - 這些項目現在已經被分割，使得它們以及其他所有項目的功能以雙向綁定更少...好：-P –

下面是如何在沒有無限摘要的視圖中執行此操作：http ：//stackoverflow.com/a/21653981/1435655 – m59

關閉主題：using bootstrap您可以將class =「span6 well」的div放入一個bigass行中，因爲它們將很好地堆疊起來。（你也會得到一個響應式佈局）。對不起，如果它只是bootstrap無法處理的行爲的一個例子。安東尼和雷米吉奧是對的;你必須創建一個額外的模塊車輛，將生成沉浸在你的ng重複標籤的div。

來源

2013-04-18 09:43:08

這不完全正確。有時它可以工作，而不是時間，取決於div的高度。 – arg20

作爲改進安東尼給出了答案，我會說，你可以用切片的方法，而不是通過所有這些條件去爲自己省下不少麻煩。

嘗試定義您的過濾器，因爲它遵循：

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

來源

2013-06-05 15:05:27 alex952

Angular.js使用bootstrap和動態創建行

回答

相關問題