Szukam odpowiedniego wzorca do wstrzykiwania klasy wiersza ładowania początkowego co każde 3 kolumny. Potrzebuję tego, ponieważ kolumny nie mają ustalonej wysokości (i nie chcę jej naprawiać), więc psuje mój projekt!
Oto mój kod:
<div ng-repeat="product in products">
<div ng-if="$index % 3 == 0" class="row">
<div class="col-sm-4" >
...
</div>
</div>
</div>
Ale wyświetla tylko jeden produkt w każdym wierszu. Jako wynik końcowy chcę:
<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>
Czy mogę to osiągnąć za pomocą samego wzoru powtarzania ng (bez dyrektywy lub kontrolera)? W docs wprowadzają NG-repeat-start i NG-repeat-end, ale nie mogę dowiedzieć się, jak wykorzystać to właśnie ten przypadek użycia! Czuję, że jest to coś, czego często używamy w tworzeniu szablonów bootstrap! ? Dzięki
Odpowiedzi:
Najczęściej głosowana odpowiedź, choć skuteczna, nie jest tym, co uważam za metodę kątową, ani nie jest to użycie własnych klas bootstrap, które mają poradzić sobie z tą sytuacją. Jak wspomniał @claies,
.clearfix
klasa jest przeznaczona do takich sytuacji. Moim zdaniem najczystsza realizacja wygląda następująco:Ta struktura pozwala uniknąć bałaganu w indeksowaniu tablicy products, pozwala na czystą notację kropkową i wykorzystuje klasę clearfix zgodnie z jej przeznaczeniem.
źródło
Wiem, że jest trochę za późno, ale i tak może komuś pomóc. Zrobiłem to tak:
jsfiddle
źródło
ng-if="$index+1 < products.length"
ing-if="$index+2 < products.length"
Okay, to rozwiązanie jest znacznie prostsze niż te, które już są dostępne i umożliwia różne szerokości kolumn dla różnych szerokości urządzeń.
Zauważ, że
% 6
część ma być równa liczbie wynikowych kolumn. Więc jeśli w elemencie kolumny masz klasęcol-lg-2
będzie 6 kolumn, więc użyj... % 6
.Ta technika (z wyłączeniem
ng-if
) jest faktycznie udokumentowana tutaj: Dokumentacja Bootstrapźródło
Chociaż to, co chcesz osiągnąć, może być przydatne, istnieje inna opcja, o której myślę, że możesz przeoczyć, która jest znacznie prostsza.
Masz rację, tabele Bootstrap działają dziwnie, gdy masz kolumny, które nie mają stałej wysokości. Istnieje jednak klasa ładowania początkowego utworzona w celu zwalczania tego problemu i wykonywania responsywnych resetów .
po prostu utwórz pusty
<div class="clearfix"></div>
przed rozpoczęciem każdego nowego wiersza, aby umożliwić zresetowanie elementów zmiennoprzecinkowych i powrót kolumn na właściwe pozycje.tutaj jest but .
źródło
flex
kolumny mają taką samą wysokość?Dzięki za sugestie, trafiłeś na właściwą drogę!
Przejdźmy do pełnego wyjaśnienia:
Domyślnie zapytanie http get w AngularJS zwraca obiekt
Więc jeśli chcesz użyć funkcji @Ariel Array.prototype.chunk, musisz najpierw przekształcić obiekt w tablicę.
A następnie użycie funkcji chunk W SWOIM KONTROLERZE w przeciwnym razie, jeśli zostanie użyta bezpośrednio do ng-repeat, doprowadzi cię do błędu infdig . Ostatni kontroler wygląda:
A HTML staje się:
Z drugiej strony zdecydowałem się bezpośrednio zwrócić tablicę [] zamiast obiektu {} z mojego pliku JSON. W ten sposób kontroler stanie się (proszę zwrócić uwagę na specyficzną składnię toArray: true ):
HTML pozostaje taki sam jak powyżej.
OPTYMALIZACJA
Ostatnie pytanie w napięciu brzmi: jak zrobić to w 100% AngularJS bez rozszerzania tablicy javascript o funkcję chunk ... jeśli niektórzy są zainteresowani pokazaniem nam, czy ng-repeat-start i ng-repeat-end są do zrobienia. . Jestem ciekawy ;)
ROZWIĄZANIE ANDREWA
Dzięki @Andrew wiemy teraz, że dodawanie klasy bootstrap clearfix co trzy (lub jakikolwiek inny numer) elementów rozwiązuje problem z wyświetlaniem z różnych wysokości bloku.
Więc HTML staje się:
A twój kontroler pozostaje dość miękki dzięki usuniętej funkcji chunck :
źródło
Możesz to zrobić bez dyrektywy, ale nie jestem pewien, czy to najlepszy sposób. Aby to zrobić, musisz utworzyć tablicę tablic z danych, które chcesz wyświetlić w tabeli, a następnie użyć 2 ng-repeat do iteracji po tablicy.
aby utworzyć tablicę do wyświetlania, użyj tej funkcji jak w przypadku produktów.chunk (3)
a następnie zrób coś takiego, używając powtórzenia 2 ng
źródło
Oparte na rozwiązaniu Alpar, przy użyciu tylko szablonów z wspomaganymi powtórzeniami ng. Działa zarówno z pełnymi, jak i częściowo pustymi wierszami:
JSFiddle
źródło
Właśnie stworzyłem rozwiązanie, które działa tylko w szablonie. Rozwiązaniem jest
Punkt używa danych dwukrotnie, jeden dla pętli zewnętrznej. Dodatkowe znaczniki zakresu pozostaną, ale zależy to od tego, jak sobie radzisz.
Jeśli jest to układ 3-kolumnowy, będzie wyglądał jak
Szczerze, chciałem
Chociaż to nie zadziałało.
źródło
Kolejne małe ulepszenie odpowiedzi @Duncan i innych odpowiedzi opartych na elemencie clearfix. Jeśli chcesz, aby treść była klikalna , potrzebujesz na niej
z-index
> 0 lub clearfix będzie nakładał się na treść i obsługiwał kliknięcie.Oto przykład, który nie działa (nie widać wskaźnika kursora, a kliknięcie nic nie da):
Chociaż jest to naprawione :
Dodałem
z-index: 1
, że zawartość podnosi się ponad clearfix i usunąłem element div kontenera, używając zamiast tegong-repeat-start
ing-repeat-end
(dostępny w AngularJS 1.2), ponieważ spowodował, że indeks Z nie działał.Mam nadzieję że to pomoże!
Aktualizacja
Plunker: http://plnkr.co/edit/4w5wZj
źródło
flex
w przypadku rzędów, aby kolumny miały tę samą wysokość?rozwiązałem to za pomocą klasy ng
źródło
Najlepszym sposobem zastosowania klasy jest użycie ng-class, które może być użyte do zastosowania klas na podstawie jakiegoś warunku.
a następnie w kontrolerze
źródło
Po połączeniu wielu odpowiedzi i sugestii tutaj, jest to moja ostateczna odpowiedź, która działa dobrze
flex
, która pozwala nam tworzyć kolumny o równej wysokości, sprawdza również ostatni indeks i nie musisz powtarzać wewnętrznego HTML. Nie używaclearfix
:Wyświetli coś takiego:
źródło
Mała modyfikacja w rozwiązaniu @alpar
jsfiddle
źródło
To zadziałało dla mnie, bez splatania ani niczego wymaganego:
HTML
JavaScript
źródło
Born Solutions to najlepsze rozwiązanie, wystarczy trochę poprawić, aby sprostać potrzebom, miałem różne responsywne rozwiązania i trochę się zmieniłem
źródło
Opierając się na odpowiedzi Alpara, oto bardziej uogólniony sposób podziału pojedynczej listy elementów na wiele kontenerów (wiersze, kolumny, zasobniki, cokolwiek):
dla listy 10 pozycji generuje:
Liczbę pojemników można szybko zakodować w funkcji kontrolera:
JS (ES6)
HTML
Takie podejście pozwala uniknąć powielania znaczników pozycji (
<span>{{item.name}}</span>
w tym przypadku) w szablonie źródłowym - nie jest to wielka wygrana dla prostego zakresu, ale dla bardziej złożonej struktury DOM (którą miałem) pomaga to utrzymać szablon SUCHY.źródło
Aktualizacja 2019 - Bootstrap 4
Ponieważ Bootstrap 3 używał pływaków, wymagało to clearfix resetowania co n (3 lub 4) kolumn (
.col-*
) w.row
aby zapobiec nierównomiernemu zawijaniu kolumn.Teraz, gdy Bootstrap 4 używa flexboksa , nie ma już potrzeby zawijania kolumn oddzielnymi
.row
tagami lub wstawiania dodatkowych elementów div, aby wymusić na colach zawijanie co n kolumn.Możesz po prostu powtórzyć wszystkie kolumny w jednym
.row
pojemniku.Na przykład 3 kolumny w każdym wierszu wizualnym to:
Więc w przypadku Bootstrapa, powtórzenie ng to po prostu:
Demo: https://www.codeply.com/go/Z3IjLRsJXX
źródło
Zrobiłem to tylko za pomocą boostrapa, musisz bardzo uważać na położenie rzędu i kolumny, oto mój przykład.
źródło