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
angularjs
twitter-bootstrap
angularjs-ng-repeat
ng-repeat
Umarmungen
quelle
quelle
Antworten:
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
.clearfix
Klasse für Situationen wie diese gedacht. Meiner Meinung nach ist die sauberste Implementierung wie folgt:Diese Struktur vermeidet eine unordentliche Indizierung des Produktarrays, ermöglicht eine saubere Punktnotation und verwendet die Clearfix-Klasse für den beabsichtigten Zweck.
quelle
Ich weiß, dass es etwas spät ist, aber es könnte trotzdem jemandem helfen. Ich habe es so gemacht:
jsfiddle
quelle
ng-if="$index+1 < products.length"
undng-if="$index+2 < products.length"
Okay, diese Lösung ist viel einfacher als die bereits hier beschriebenen und ermöglicht unterschiedliche Spaltenbreiten für unterschiedliche Gerätebreiten.
Beachten Sie, dass das
% 6
Teil der Anzahl der resultierenden Spalten entsprechen soll. Wenn Sie also auf dem Spaltenelement die Klasse haben,col-lg-2
gibt es 6 Spalten. Verwenden Sie also... % 6
.Diese Technik (mit Ausnahme der
ng-if
) ist hier tatsächlich dokumentiert: Bootstrap-Dokumentequelle
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 .
quelle
flex
, um Spalten auf die gleiche Höhe zu bringen?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:
Und HTML wird:
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 ):
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:
Und Ihr Controller bleibt mit entfernter Chunck- Funktion ziemlich weich :
quelle
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)
und dann mache so etwas mit 2 ng-repeat
quelle
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:
JSFiddle
quelle
Ich habe gerade eine Lösung dafür gefunden, die nur in Vorlagen funktioniert. Die Lösung ist
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
Ehrlich gesagt wollte ich
Obwohl es nicht funktioniert hat.
quelle
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 eine
z-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):
Während dies die feste ist :
Ich habe hinzugefügt
z-index: 1
, dass der Inhalt über den Clearfix angehoben wird, und ich habe den Container div stattdessen mitng-repeat-start
und 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
quelle
flex
in Zeilen, um Spalten auf die gleiche Höhe zu bringen?Ich habe das mit ng-class gelöst
quelle
Der beste Weg, eine Klasse anzuwenden, ist die Verwendung von ng-class. Sie kann verwendet werden, um Klassen basierend auf bestimmten Bedingungen anzuwenden.
und dann in Ihrem Controller
quelle
Nachdem ich hier viele Antworten und Vorschläge kombiniert habe, ist dies meine endgültige Antwort, die gut funktioniert
flex
und 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 nichtclearfix
:Es wird ungefähr so ausgegeben:
quelle
Kleine Modifikation in der Lösung von @alpar
jsfiddle
quelle
Dies funktionierte für mich, kein Spleißen oder irgendetwas erforderlich:
HTML
JavaScript
quelle
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
quelle
Aufbauend auf Alpars Antwort gibt es eine allgemeinere Möglichkeit, eine einzelne Liste von Elementen in mehrere Container (Zeilen, Spalten, Buckets usw.) aufzuteilen:
generiert für eine Liste von 10 Elementen:
Die Anzahl der Container kann schnell in eine Steuerungsfunktion codiert werden:
JS (ES6)
HTML
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.quelle
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
.row
Tags 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
.row
Container wiederholen .Zum Beispiel sind 3 Spalten in jeder visuellen Zeile:
Für Bootstrap lautet die ng-Wiederholung also einfach:
Demo: https://www.codeply.com/go/Z3IjLRsJXX
quelle
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.
quelle