Angular ng-repeat füge alle 3 oder 4 Spalten eine Bootstrap-Zeile hinzu

Ich suche nach dem richtigen Muster, um alle 3 Spalten eine Bootstrap-Zeilenklasse einzufügen. Ich brauche das, weil cols keine feste Höhe hat (und ich keine reparieren möchte), also bricht es mein Design!

Hier ist mein Code:

<div ng-repeat="product in products">
    <div ng-if="$index % 3 == 0" class="row">
        <div class="col-sm-4" >
            ...
        </div>
    </div>
</div>

Es wird jedoch nur ein Produkt in jeder Zeile angezeigt. Was ich als Endergebnis möchte, ist:

<div class="row">
    <div class="col-sm4"> ... </div>
    <div class="col-sm4"> ... </div>
    <div class="col-sm4"> ... </div>
</div>
<div class="row">
    <div class="col-sm4"> ... </div>
    <div class="col-sm4"> ... </div>
    <div class="col-sm4"> ... </div>
</div>

Kann ich dies nur mit ng-repeat-Muster erreichen (ohne Direktive oder Controller)? Die Dokumente führen ng-repeat-start und ng-repeat-end ein, aber ich kann nicht herausfinden, wie man es benutzt, ist dieser Anwendungsfall! Ich denke, das ist etwas, was wir oft beim Bootstrap-Templating verwenden! ? Vielen Dank

Die am besten gewählte Antwort ist zwar effektiv, aber ich würde sie nicht als eckig betrachten, und es werden auch keine Bootstrap-eigenen Klassen verwendet, die mit dieser Situation umgehen sollen. Wie @claies erwähnt hat, ist die .clearfixKlasse für Situationen wie diese gedacht. Meiner Meinung nach ist die sauberste Implementierung wie folgt:

<div class="row">
    <div ng-repeat="product in products">
        <div class="clearfix" ng-if="$index % 3 == 0"></div>
        <div class="col-sm-4">
            <h2>{{product.title}}</h2>
        </div>
    </div>
</div>

Diese Struktur vermeidet eine unordentliche Indizierung des Produktarrays, ermöglicht eine saubere Punktnotation und verwendet die Clearfix-Klasse für den beabsichtigten Zweck.

Ich weiß, dass es etwas spät ist, aber es könnte trotzdem jemandem helfen. Ich habe es so gemacht:

<div ng-repeat="product in products" ng-if="$index % 3 == 0" class="row">
    <div class="col-xs-4">{{products[$index]}}</div>
    <div class="col-xs-4" ng-if="products.length > ($index + 1)">{{products[$index + 1]}}</div>
    <div class="col-xs-4" ng-if="products.length > ($index + 2)">{{products[$index + 2]}}</div>
</div>

jsfiddle

Okay, diese Lösung ist viel einfacher als die bereits hier beschriebenen und ermöglicht unterschiedliche Spaltenbreiten für unterschiedliche Gerätebreiten.

<div class="row">
    <div ng-repeat="image in images">
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
            ... your content here ...
        </div>
        <div class="clearfix visible-lg" ng-if="($index + 1) % 6 == 0"></div>
        <div class="clearfix visible-md" ng-if="($index + 1) % 4 == 0"></div>
        <div class="clearfix visible-sm" ng-if="($index + 1) % 3 == 0"></div>
        <div class="clearfix visible-xs" ng-if="($index + 1) % 2 == 0"></div>
    </div>
</div>

Beachten Sie, dass das % 6Teil der Anzahl der resultierenden Spalten entsprechen soll. Wenn Sie also auf dem Spaltenelement die Klasse haben, col-lg-2gibt es 6 Spalten. Verwenden Sie also... % 6 .

Diese Technik (mit Ausnahme der ng-if) ist hier tatsächlich dokumentiert: Bootstrap-Dokumente

Während das, was Sie erreichen möchten, nützlich sein kann, gibt es eine andere Option, von der ich glaube, dass Sie sie übersehen, die viel einfacher ist.

Sie haben Recht, die Bootstrap-Tabellen verhalten sich seltsam, wenn Sie Spalten haben, deren Höhe nicht fest ist. Es wurde jedoch eine Bootstrap-Klasse erstellt, um dieses Problem zu bekämpfen und reaktionsschnelle Zurücksetzungen durchzuführen .

Erstellen Sie einfach eine leere <div class="clearfix"></div> vor Beginn jeder neuen Zeile ein Leerzeichen, damit die Floats zurückgesetzt und die Spalten an ihre korrekten Positionen zurückkehren können.

hier ist ein Bootply .

Vielen Dank für Ihre Vorschläge, Sie haben mich auf den richtigen Weg gebracht!

Lassen Sie uns eine vollständige Erklärung geben:

• Standardmäßig gibt AngularJS http get query ein Objekt zurück

• Wenn Sie also die Funktion @Ariel Array.prototype.chunk verwenden möchten, müssen Sie zuerst das Objekt in ein Array umwandeln.

• Wenn Sie dann die Chunk-Funktion IN YOUR CONTROLLER verwenden, wird sie bei direkter Verwendung in ng-repeat zu einem Infdig-Fehler geführt . Der endgültige Controller sieht aus:

  // Initialize products to empty list
  $scope.products = [];
  
  // Load products from config file
  $resource("/json/shoppinglist.json").get(function (data_object)
  {
      // Transform object into array
      var data_array =[];
      for( var i in data_object ) {
          if (typeof data_object[i] === 'object' && data_object[i].hasOwnProperty("name")){
              data_array.push(data_object[i]);
          }
      }
      // Chunk Array and apply scope
      $scope.products = data_array.chunk(3);
  });

Und HTML wird:

<div class="row" ng-repeat="productrow in products">

    <div class="col-sm-4" ng-repeat="product in productrow">

Auf der anderen Seite habe ich beschlossen, ein Array [] anstelle eines Objekts {} direkt aus meiner JSON-Datei zurückzugeben. Auf diese Weise wird der Controller (bitte beachten Sie die spezifische Syntax isArray: true ):

    // Initialize products to empty list 
    $scope.products = [];

    // Load products from config file
    $resource("/json/shoppinglist.json").query({method:'GET', isArray:true}, function (data_array)
    {
        $scope.products = data_array.chunk(3);
    });

HTML bleibt wie oben.

OPTIMIERUNG

Die letzte spannende Frage lautet: Wie kann man 100% AngularJS erstellen, ohne das Javascript-Array mit der Chunk-Funktion zu erweitern? Wenn einige Leute uns zeigen möchten, ob ng-repeat-start und ng-repeat-end der richtige Weg sind. . Ich bin neugierig ;)

ANDREWS LÖSUNG

Dank @Andrew wissen wir jetzt, dass das Hinzufügen einer Bootstrap-Clearfix-Klasse alle drei (oder eine beliebige Anzahl) Elemente das Anzeigeproblem aufgrund der unterschiedlichen Blockhöhe behebt.

So wird HTML:

<div class="row">

    <div ng-repeat="product in products">

        <div ng-if="$index % 3 == 0" class="clearfix"></div>

        <div class="col-sm-4"> My product descrition with {{product.property}}

Und Ihr Controller bleibt mit entfernter Chunck- Funktion ziemlich weich :

// Initialize products to empty list 
        $scope.products = [];

        // Load products from config file
        $resource("/json/shoppinglist.json").query({method:'GET', isArray:true}, function (data_array)
        {
            //$scope.products = data_array.chunk(3);
            $scope.products = data_array;
        });

Sie können es ohne eine Anweisung tun, aber ich bin nicht sicher, ob es der beste Weg ist. Dazu müssen Sie aus den Daten, die Sie in der Tabelle anzeigen möchten, ein Array von Arrays erstellen und anschließend 2 ng-repeat verwenden, um das Array zu durchlaufen.

Um das Array für die Anzeige zu erstellen, verwenden Sie diese Funktion wie folgt: products.chunk (3)

Array.prototype.chunk = function(chunkSize) {
    var array=this;
    return [].concat.apply([],
        array.map(function(elem,i) {
            return i%chunkSize ? [] : [array.slice(i,i+chunkSize)];
        })
    );
}

und dann mache so etwas mit 2 ng-repeat

<div class="row" ng-repeat="row in products.chunk(3)">
  <div class="col-sm4" ng-repeat="item in row">
    {{item}}
  </div>
</div>

Basierend auf der Alpar-Lösung werden nur Vorlagen mit anidierter ng-Wiederholung verwendet. Funktioniert sowohl mit vollständigen als auch mit teilweise leeren Zeilen:

<div data-ng-app="" data-ng-init="products='soda','beer','water','milk','wine']" class="container">
    <div ng-repeat="product in products" ng-if="$index % 3 == 0" class="row">
        <div class="col-xs-4" 
            ng-repeat="product in products.slice($index, ($index+3 > products.length ? 
            products.length : $index+3))"> {{product}}</div>
    </div>
</div>

JSFiddle

Ich habe gerade eine Lösung dafür gefunden, die nur in Vorlagen funktioniert. Die Lösung ist

    <span ng-repeat="gettingParentIndex in products">
        <div class="row" ng-if="$index<products.length/2+1">    <!-- 2 columns -->
            <span ng-repeat="product in products">
                <div class="col-sm-6" ng-if="$index>=2*$parent.$index && $index <= 2*($parent.$index+1)-1"> <!-- 2 columns -->
                    {{product.foo}}
                </div>
            </span>
        </div>
    </span>

Point verwendet Daten zweimal, eine für eine externe Schleife. Zusätzliche Span-Tags bleiben erhalten, dies hängt jedoch davon ab, wie Sie einen Kompromiss eingehen.

Wenn es sich um ein 3-Spalten-Layout handelt, wird es so sein

    <span ng-repeat="gettingParentIndex in products">
        <div class="row" ng-if="$index<products.length/3+1">    <!-- 3 columns -->
            <span ng-repeat="product in products">
                <div class="col-sm-4" ng-if="$index>=3*$parent.$index && $index <= 3*($parent.$index+1)-1"> <!-- 3 columns -->
                    {{product.foo}}
                </div>
            </span>
        </div>
    </span>

Ehrlich gesagt wollte ich

$index<Math.ceil(products.length/3)

Obwohl es nicht funktioniert hat.

Nur eine weitere kleine Verbesserung der @ Duncan-Antwort und der anderen Antworten basierend auf dem Clearfix-Element. Wenn Sie den Inhalt anklickbar machen möchten, benötigen Sie einez-index > 0, oder Clearfix überlappt den Inhalt und behandelt den Klick.

Dies ist das Beispiel, das nicht funktioniert (Sie können den Cursorzeiger nicht sehen und das Klicken führt zu nichts):

<div class="row">
    <div ng-repeat="product in products">
        <div class="clearfix" ng-if="$index % 3 == 0"></div>
        <div class="col-sm-4" style="cursor: pointer" ng-click="doSomething()">
            <h2>{{product.title}}</h2>
        </div>
    </div>
</div>

Während dies die feste ist :

<div class="row">
    <div ng-repeat-start="product in products" class="clearfix" ng-if="$index % 3 == 0"></div>
    <div ng-repeat-end class="col-sm-4" style="cursor: pointer; z-index: 1" ng-click="doSomething()">
            <h2>{{product.title}}</h2>
    </div>
</div>

Ich habe hinzugefügt z-index: 1, dass der Inhalt über den Clearfix angehoben wird, und ich habe den Container div stattdessen mit ng-repeat-startund entferntng-repeat-end (verfügbar in AngularJS 1.2) entfernt, weil der Z-Index dadurch nicht funktioniert hat.

Hoffe das hilft!

Aktualisieren

Plunker: http://plnkr.co/edit/4w5wZj

Ich habe das mit ng-class gelöst

<div ng-repeat="item in items">
    <div ng-class="{ 'row': ($index + 1) % 4 == 0 }">
        <div class="col-md-3">
            {{item.name}}
        </div>
    </div>
</div>

Der beste Weg, eine Klasse anzuwenden, ist die Verwendung von ng-class. Sie kann verwendet werden, um Klassen basierend auf bestimmten Bedingungen anzuwenden.

<div ng-repeat="product in products">
   <div ng-class="getRowClass($index)">
       <div class="col-sm-4" >
           <!-- your code -->
       </div>
   </div>

und dann in Ihrem Controller

$scope.getRowClass = function(index){
    if(index%3 == 0){
     return "row";
    }
}

Nachdem ich hier viele Antworten und Vorschläge kombiniert habe, ist dies meine endgültige Antwort, die gut funktioniert flexund es uns ermöglicht, Spalten mit gleicher Höhe zu erstellen, den letzten Index zu überprüfen und den inneren HTML-Code nicht zu wiederholen. Es verwendet nicht clearfix:

<div ng-repeat="prod in productsFiltered=(products | filter:myInputFilter)" ng-if="$index % 3 == 0" class="row row-eq-height">
    <div ng-repeat="i in [0, 1, 2]" ng-init="product = productsFiltered[$parent.$parent.$index + i]"  ng-if="$parent.$index + i < productsFiltered.length" class="col-xs-4">
        <div class="col-xs-12">{{ product.name }}</div>
    </div>
</div>

Es wird ungefähr so ​​ausgegeben:

<div class="row row-eq-height">
    <div class="col-xs-4">
        <div class="col-xs-12">
            Product Name
        </div>
    </div>
    <div class="col-xs-4">
        <div class="col-xs-12">
            Product Name
        </div>
    </div>
    <div class="col-xs-4">
        <div class="col-xs-12">
            Product Name
        </div>
    </div>
</div>
<div class="row row-eq-height">
    <div class="col-xs-4">
        <div class="col-xs-12">
            Product Name
        </div>
    </div>
    <div class="col-xs-4">
        <div class="col-xs-12">
            Product Name
        </div>
    </div>
    <div class="col-xs-4">
        <div class="col-xs-12">
            Product Name
        </div>
    </div>
</div>

Kleine Modifikation in der Lösung von @alpar

<div data-ng-app="" data-ng-init="products=['A','B','C','D','E','F', 'G','H','I','J','K','L']" class="container">
    <div ng-repeat="product in products" ng-if="$index % 6 == 0" class="row">
        <div class="col-xs-2" ng-repeat="idx in [0,1,2,3,4,5]">
        {{products[idx+$parent.$index]}} <!-- When this HTML is Big it's useful approach -->
        </div>
    </div>
</div>

jsfiddle

Dies funktionierte für mich, kein Spleißen oder irgendetwas erforderlich:

HTML

<div class="row" ng-repeat="row in rows() track by $index">
    <div class="col-md-3" ng-repeat="item in items" ng-if="indexInRange($index,$parent.$index)"></div>
</div>

JavaScript

var columnsPerRow = 4;
$scope.rows = function() {
  return new Array(columnsPerRow);
};
$scope.indexInRange = function(columnIndex,rowIndex) {
  return columnIndex >= (rowIndex * columnsPerRow) && columnIndex < (rowIndex * columnsPerRow) + columnsPerRow;
};

Born Solutions ist das beste, ich brauche nur ein bisschen Woche, um die Bedürfnisse zu befriedigen. Ich hatte verschiedene reaktionsschnelle Lösungen und habe mich ein bisschen verändert

<div ng-repeat="post in posts">
    <div class="vechicle-single col-lg-4 col-md-6 col-sm-12 col-xs-12">
    </div>
    <div class="clearfix visible-lg" ng-if="($index + 1) % 3 == 0"></div>
    <div class="clearfix visible-md" ng-if="($index + 1) % 2 == 0"></div>
    <div class="clearfix visible-sm" ng-if="($index + 1) % 1 == 0"></div>
    <div class="clearfix visible-xs" ng-if="($index + 1) % 1 == 0"></div>
</div>

Aufbauend auf Alpars Antwort gibt es eine allgemeinere Möglichkeit, eine einzelne Liste von Elementen in mehrere Container (Zeilen, Spalten, Buckets usw.) aufzuteilen:

<div class="row" ng-repeat="row in [0,1,2]">
  <div class="col" ng-repeat="item in $ctrl.items" ng-if="$index % 3 == row">
    <span>{{item.name}}</span>
  </div>
</div> 

generiert für eine Liste von 10 Elementen:

<div class="row">
  <div class="col"><span>Item 1</span></div>
  <div class="col"><span>Item 4</span></div>
  <div class="col"><span>Item 7</span></div>
  <div class="col"><span>Item 10</span></div>
</div> 
<div class="row">
  <div class="col"><span>Item 2</span></div>
  <div class="col"><span>Item 5</span></div>
  <div class="col"><span>Item 8</span></div>
</div> 
<div class="row">
  <div class="col"><span>Item 3</span></div>
  <div class="col"><span>Item 6</span></div>
  <div class="col"><span>Item 9</span></div>
</div> 

Die Anzahl der Container kann schnell in eine Steuerungsfunktion codiert werden:

JS (ES6)

$scope.rowList = function(rows) {
  return Array(rows).fill().map((x,i)=>i);
}
$scope.rows = 2;

HTML

<div class="row" ng-repeat="row in rowList(rows)">
  <div ng-repeat="item in $ctrl.items" ng-if="$index % rows == row">
    ...

Dieser Ansatz vermeidet das Duplizieren des Element-Markups ( <span>{{item.name}}</span>in diesem Fall) in der Quellvorlage - kein großer Gewinn für eine einfache Zeitspanne, aber für eine komplexere DOM-Struktur (die ich hatte) hilft dies, die Vorlage trocken zu halten.

Update 2019 - Bootstrap 4

Da Bootstrap 3 Floats verwendete, musste Clearfix alle n (3 oder 4) Spalten ( .col-*) in der.row , um ein ungleichmäßiges Umbrechen der Spalten zu verhindern.

Jetzt, da Bootstrap 4 Flexbox verwendet , müssen Spalten nicht mehr in separate .rowTags eingeschlossen oder zusätzliche Divs eingefügt werden, um Cols zu zwingen, alle n zu umbrechen Spalten .

Sie können einfach alle Spalten in einem einzigen .rowContainer wiederholen .

Zum Beispiel sind 3 Spalten in jeder visuellen Zeile:

<div class="row">
     <div class="col-4">...</div>
     <div class="col-4">...</div>
     <div class="col-4">...</div>
     <div class="col-4">...</div>
     <div class="col-4">...</div>
     <div class="col-4">...</div>
     <div class="col-4">...</div>
     (...repeat for number of items)
</div>

Für Bootstrap lautet die ng-Wiederholung also einfach:

  <div class="row">
      <div class="col-4" ng-repeat="item in items">
          ... {{ item }}
      </div>
  </div>

Demo: https://www.codeply.com/go/Z3IjLRsJXX

Ich habe es nur mit Boostrap gemacht. Sie müssen bei der Position der Zeile und der Spalte sehr vorsichtig sein. Hier ist mein Beispiel.

<section>
<div class="container">
        <div ng-app="myApp">
        
                <div ng-controller="SubregionController">
                    <div class="row text-center">
                        <div class="col-md-4" ng-repeat="post in posts">
                            <div >
                                <div>{{post.title}}</div>
                            </div>
                        </div>
                    
                    </div>
                </div>        
        </div>
    </div>
</div> 

</section>