Angularjs Bootstrap verwenden und dynamisch Erstellen von Zeilen

Question

Ich versuche, herauszufinden, wie dynamisch mit einer Klasse von row-fluid mit angular.js mit der ng-repeat Richtlinie bootstrap Reihe divs erstellen. Hier

die Winkel:

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

Dies gilt allerdings nicht Arbeit. Die bootstrap html Ich möchte erzeugen, ist:

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

Im Grunde brauche ich eine neue <div class="row-fluid"> mod 2 des Index innerhalb des ng-Repeat, und wenn ihr 0, schließen sich die </div> und erstellen zu tun. Wie ist das möglich?

Answer 1

Die Idee ist, Ihre Elemente zu filtern, um sie zu gruppieren, und eine zweite ngRepeat zu erstellen, um auf Unterelemente zu iterieren.

Zunächst fügen Sie diesen Filter zu Ihrem Modul:

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

In Ihrem Controler (denn wenn Sie direkt in Ihrer Vorlage auswählen, dann werden Sie eine $digest loop haben):

function TaskCtrl() { 
    $scope.tasksGroupBy2 = $filter('groupBy')(taskGroup, 2); 
} 

Und in Ihre .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

Off Topic: mit Bootstrap Du kannst divs der Klasse = "span6 well" einfach in eine große Reihe setzen, da sie gut gestapelt werden. (Sie erhalten auch ein responsives Layout). Es tut uns leid, wenn es nur ein Beispiel für das Verhalten war, das Bootstrap nicht behandeln kann. Anthony und Remigio haben recht; Sie müssen ein zusätzliches Modulfahrzeug erstellen, das divs erzeugt, die in Ihre ng-wiederholten Tags eingetaucht sind.

Answer 3

Als eine Verbesserung der Antwort, die Anthony gab, würde ich sagen, dass Sie sich eine Menge Mühe mit der Slice-Methode sparen könnten, anstatt all diese Bedingungen durchzugehen.

Versuchen Sie Filter definieren, wie folgt:

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

Danach können Sie den Filter auf dem Controller aufrufen kann als Anthony in seiner Antwort wies darauf hin:

function Controller ($scope) { 
    $scope.itemsGrouped = $filter('group')(itemsArray, 5); 
}