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

111

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

Umarmungen
quelle
Ich denke, Sie sollten Ihre Daten so modellieren, dass sie zu Ihrem Design passen. Es sollte sich wahrscheinlich um ein mehrdimensionales Array oder Objekt mit Darstellung von Zeilen und Spalten handeln. Dann sollten Sie über Zeilen iterieren und die Direktive der bedingten Klasse "ng-class" und innerhalb der Zeile verwenden Sie sollten dann über Spalten iterieren.
Antanas_sepikas
Interessant und sicherlich eine funktionierende Lösung, aber an dem Tag, an dem ich 4 statt 3 Produkte hintereinander anzeigen möchte, muss ich meine Datenstruktur ändern. Ich würde es vorziehen, wenn dies im "Bereich" der reinen Anzeigefunktionalität
bleibt
Ich verstehe, dann sollten Sie wahrscheinlich in Stücken iterieren, wie in der Antwort von Ariel. Auch diesen Beitrag finden Sie unter stackoverflow.com/questions/18564888/… nützlich.
Antanas_sepikas
Ich denke, das ist genau das, wonach Sie suchen: stackoverflow.com/a/30426750/1943442
user1943442

Antworten:

164

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.

Duncan
quelle
6
Dies ist eine gute Idee. Wenn Sie jedoch an der Verwendung von Flexbox interessiert sind, müssen Sie diese für die Zeile und nicht für die Divs innerhalb der Zeilen verwenden, damit jede Box / Div dieselbe Höhe hat. Clearfix ist großartig, hilft aber nicht dabei, alles in einer Reihe zu halten.
Codierter Container
3
Dies ist meine bevorzugte Antwort. Sehr sauber und einfach.
Hinrich
1
Funktioniert auch hervorragend für meine Implementierung! :)
Will Strohl
1
Großartig ... Dies sollte als akzeptierte Antwort gewählt werden!
Velu
3
Dies ist die perfekte Antwort
Deepu
148

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

alpar
quelle
3
es hat mir sehr geholfen !! Vielen Dank.
SupimpaAllTheWay
Das ist wirklich einfach zu implementieren! Vielen Dank!
Manas Bajaj
Hat mir viel geholfen. Vielen Dank!
Ahmad Ajmi
17
Tolle Lösung, es wird jedoch nicht überprüft, ob $ index + 1 und $ index +2 die Array-Grenzen überschreiten. Die letzten beiden Divs erfordern ng-if="$index+1 < products.length"undng-if="$index+2 < products.length"
Mustafa Ozturk
Können wir dies für ein Schlüssel-Wert-Paar tun? nächsten Schlüssel bekommen? Anstatt $ index + 1
bpbhat77
25

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


quelle
1
Meiner Meinung nach ist dies die beste Lösung.
user216661
Wenn Bootstrap neu ist, kann leicht übersehen werden, dass das Definieren der Zeilen nicht erforderlich ist. Dies hat perfekt funktioniert und ist eine etwas vollständigere Version von Duncans Lösung.
Phosplait
Genau das habe ich gesucht.
Hinrich
@phosplait Was ist der Vorteil gegenüber Duncans?
Jeppe
17

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 .

Claies
quelle
Dies löst nicht die negativen 15 Pixel Rand, die jede .row für den Bootstrap hat.
Logus
Funktioniert dies flex, um Spalten auf die gleiche Höhe zu bringen?
Alisson
16

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

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>
Ariel Henryson
quelle
7

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

Juangui Jordán
quelle
5

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.

wataru
quelle
Ich habe diese Lösung versucht, um 2 Elemente in jeder Zeile zu implementieren. Zum Beispiel habe ich 5 Elemente in einer Liste, also sollte ich 3 Zeilen mit 2 Elementen / Spalten in den ersten 2 Zeilen und 1 Spalte in der letzten Zeile ausgeben. Das Problem ist, ich bekomme hier 5 Zeilen, wobei die letzten 2 Zeilen leer sind. Sie fragen sich, wie Sie das beheben können? Vielen Dank
Maverick Riz
@ MaverickAzy danke für den Versuch. Ich weiß, dass es ein Problem gibt, dass wenn die Höhe dieser Elemente unterschiedlich ist, es nicht gut funktioniert.
Kataru
Die Höhe der Elemente ist tatsächlich gleich. Das Problem ist, ich sollte nur 3 Zeilen bekommen, aber 5 Zeilen mit den letzten 2 leeren Zeilen. Können Sie mir sagen, ob die Produktlänge 5 ist, dann 5/2 + 1 =? Diese Logik ist für mich in Zeile 2 für die Klassenzeile nicht klar.
Maverick Riz
@MaverickAzy diese leeren Zeilen müssen so wie sie sind generiert werden. Verwirrt es Ihr Layout?
Kataru
Nein, das Layout wird nicht durcheinander gebracht. Die einzige Sorge betrifft die leeren Zeilen. Wirklich dankbar, wenn Sie mir dabei helfen können. Vielen Dank
Maverick Riz
5

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

McGiogen
quelle
Funktioniert dies flexin Zeilen, um Spalten auf die gleiche Höhe zu bringen?
Alisson
Ich bin mir nicht sicher, ob ich deine Frage verstehe. Dies ist ein schneller Plunker, der Ihnen zeigt, was dieser Code bewirkt : plnkr.co/edit/4w5wZj?p=preview . Mit anderen Worten, clearfix richtet die zweite Titelzeile korrekt aus: Sie beginnen alle am selben Punkt, haben aber immer noch nicht die gleiche Höhe (wie Sie dank der Hintergrundfarbe sehen können). Versuchen Sie, die Clearfix-Klasse zu löschen, um das Standardverhalten zu ermitteln. Ich habe Flexbox nur ein oder zwei Mal verwendet, aber es hat viele CSS-Eigenschaften und ich bin sicher, dass Sie finden können, wonach Sie suchen.
McGiogen
Bootstrap bietet ein Beispiel dafür, wie alle Spalten in derselben Zeile erstellt werden, um die gleiche Höhe der höchsten Spalte zu erhalten. Ich musste das benutzen. Das Problem ist, dass bei mehr als 12 Spalten die Möglichkeit zum Umbrechen in eine neue Zeile verloren geht. Sie müssen daher manuell neue Zeilen erstellen. Nachdem ich ein bisschen mehr recherchiert hatte, konnte ich eine Lösung finden und hier als Antwort posten, obwohl ich nicht weiß, ob es die beste ist. Trotzdem danke, deine Antwort hat mir geholfen!
Alisson
Es ist das erste Mal, dass ich dieses Beispiel sehe, es ist wirklich nützlich! Froh dir zu helfen.
McGiogen
4

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>
Josip
quelle
2

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";
    }
}
Rajiv
quelle
2

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>
Alisson
quelle
1

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

Jaym
quelle
0

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;
};
Robbymarston
quelle
0

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>
Kiko Seijo
quelle
0

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.

Mark Chitty
quelle
0

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

Zim
quelle
0

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>

Alexis Suárez
quelle