Saya mencari pola yang tepat untuk memasukkan kelas baris bootstrap setiap 3 kolom. Saya memerlukan ini karena cols tidak memiliki tinggi tetap (dan saya tidak ingin memperbaikinya), jadi desain saya rusak!
Ini kode saya:
<div ng-repeat="product in products">
<div ng-if="$index % 3 == 0" class="row">
<div class="col-sm-4" >
...
</div>
</div>
</div>
Tapi itu hanya menampilkan satu produk di setiap baris. Yang saya inginkan sebagai hasil akhir adalah:
<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>
Bisakah saya mencapai ini hanya dengan pola ng-repeat (tanpa direktif atau controller)? The docs memperkenalkan ng-repeat-start dan ng-repeat-end tapi saya tidak tahu bagaimana menggunakannya adalah kasus penggunaan ini! Saya merasa ini adalah sesuatu yang sering kita gunakan dalam template bootstrap! ? Terima kasih
Jawaban:
Jawaban pilihan teratas, meski efektif, bukanlah apa yang saya anggap sebagai cara bersudut, juga tidak menggunakan kelas bootstrap sendiri yang dimaksudkan untuk menangani situasi ini. Seperti yang disebutkan @claies,
.clearfix
kelas tersebut dimaksudkan untuk situasi seperti ini. Menurut saya, implementasi terbersih adalah sebagai berikut:Struktur ini menghindari pengindeksan yang berantakan pada larik produk, memungkinkan notasi titik yang bersih, dan menggunakan kelas clearfix untuk tujuan yang dimaksudkan.
sumber
Saya tahu ini agak terlambat tetapi mungkin masih membantu seseorang. Saya melakukannya seperti ini:
jsfiddle.dll
sumber
ng-if="$index+1 < products.length"
danng-if="$index+2 < products.length"
Oke, solusi ini jauh lebih sederhana daripada yang sudah ada di sini, dan memungkinkan lebar kolom yang berbeda untuk lebar perangkat yang berbeda.
Perhatikan bahwa
% 6
bagian tersebut seharusnya sama dengan jumlah kolom yang dihasilkan. Jadi jika pada elemen kolom Anda memiliki kelascol-lg-2
akan ada 6 kolom, jadi gunakan... % 6
.Teknik ini (tidak termasuk
ng-if
) sebenarnya didokumentasikan di sini: Dokumentasi bootstrapsumber
Meskipun apa yang ingin Anda capai mungkin berguna, ada opsi lain yang saya yakin Anda abaikan yang jauh lebih sederhana.
Anda benar, tabel Bootstrap bertindak aneh ketika Anda memiliki kolom yang tingginya tidak tetap. Namun, ada kelas bootstrap yang dibuat untuk mengatasi masalah ini dan melakukan penyetelan ulang responsif .
cukup buat yang kosong
<div class="clearfix"></div>
sebelum awal setiap baris baru untuk memungkinkan pelampung diatur ulang dan kolom untuk kembali ke posisi yang benar.ini adalah bootply .
sumber
flex
membuat kolom memiliki ketinggian yang sama?Terima kasih atas saran Anda, Anda membuat saya di jalan yang benar!
Mari kita lihat penjelasan lengkapnya:
Secara default AngularJS http mendapatkan query mengembalikan sebuah objek
Jadi jika Anda ingin menggunakan fungsi @Ariel Array.prototype.chunk Anda harus terlebih dahulu mengubah objek menjadi sebuah array.
Dan kemudian untuk menggunakan fungsi chunk DI CONTROLLER ANDA sebaliknya jika digunakan langsung ke ng-repeat, itu akan membawa Anda ke kesalahan infdig . Pengontrol terakhir terlihat:
Dan HTML menjadi:
Di sisi lain, saya memutuskan untuk langsung mengembalikan larik [] alih-alih objek {} dari file JSON saya. Dengan cara ini, pengontrol menjadi (harap perhatikan sintaks spesifik isArray: true ):
HTML tetap sama seperti di atas.
OPTIMASI
Pertanyaan terakhir dalam ketegangan adalah: bagaimana membuatnya 100% AngularJS tanpa memperluas array javascript dengan fungsi chunk ... jika beberapa orang tertarik untuk menunjukkan kepada kita jika ng-repeat-start dan ng-repeat-end adalah cara yang harus dilakukan .. . Saya penasaran ;)
SOLUSI ANDREW
Berkat @Andrew, kami sekarang tahu menambahkan kelas bootstrap clearfix setiap tiga (atau nomor berapa pun) elemen memperbaiki masalah tampilan dari ketinggian blok differents.
Jadi HTML menjadi:
Dan pengontrol Anda tetap cukup lunak dengan fungsi chunck yang dihapus :
sumber
Anda dapat melakukannya tanpa arahan tetapi saya tidak yakin itu cara terbaik. Untuk melakukan ini, Anda harus membuat array dari data yang ingin Anda tampilkan di tabel, dan setelah itu gunakan 2 ng-repeat untuk melakukan iterasi melalui array.
untuk membuat array untuk tampilan, gunakan fungsi ini seperti products.chunk (3)
dan kemudian lakukan hal seperti itu menggunakan 2 ng-repeat
sumber
Berdasarkan solusi Alpar, hanya menggunakan template dengan anidated ng-repeat. Bekerja dengan baris kosong penuh dan sebagian:
JSFiddle
sumber
Saya baru saja membuat solusinya hanya berfungsi di template. Solusinya adalah
Point menggunakan data dua kali, satu untuk loop luar. Tag span ekstra akan tetap ada, tetapi itu tergantung pada bagaimana Anda melakukan trade off.
Jika itu adalah tata letak 3 kolom, itu akan menjadi seperti
Jujur saya ingin
Meskipun tidak berhasil.
sumber
Sedikit perbaikan lagi tentang jawaban @Duncan dan jawaban lainnya berdasarkan elemen clearfix. Jika Anda ingin membuat konten dapat diklik, Anda memerlukan file
z-index
> 0 di atasnya atau clearfix akan menimpa konten dan menangani klik.Ini adalah contoh yang tidak berfungsi (Anda tidak dapat melihat penunjuk kursor dan mengklik tidak akan melakukan apa-apa):
Meskipun ini yang sudah diperbaiki :
Saya telah menambahkan
z-index: 1
agar konten meningkatkan clearfix dan saya telah menghapus div kontainer menggunakanng-repeat-start
danng-repeat-end
(tersedia dari AngularJS 1.2) karena itu membuat z-index tidak berfungsi.Semoga ini membantu!
Memperbarui
Plunker: http://plnkr.co/edit/4w5wZj
sumber
flex
dalam baris untuk membuat kolom memiliki ketinggian yang sama?saya menyelesaikan ini menggunakan ng-class
sumber
Cara terbaik untuk menerapkan kelas adalah dengan menggunakan ng-class. Ini dapat digunakan untuk menerapkan kelas berdasarkan beberapa kondisi.
dan kemudian di pengontrol Anda
sumber
Setelah menggabungkan banyak jawaban dan saran di sini, ini adalah jawaban akhir saya, yang berfungsi dengan baik
flex
, yang memungkinkan kita membuat kolom dengan tinggi yang sama, juga memeriksa indeks terakhir, dan Anda tidak perlu mengulang HTML bagian dalam. Itu tidak menggunakanclearfix
:Ini akan menghasilkan sesuatu seperti ini:
sumber
Sedikit modifikasi pada solusi @alpar
jsfiddle.dll
sumber
Ini berhasil untuk saya, tidak perlu penyambungan atau apa pun:
HTML
JavaScript
sumber
Solusi Lahir yang terbaik, hanya perlu sedikit menyesuaikan kebutuhan, saya memiliki solusi responsif yang berbeda dan sedikit berubah
sumber
Berdasarkan jawaban Alpar, berikut adalah cara yang lebih umum untuk membagi satu daftar item menjadi beberapa wadah (baris, kolom, ember, apa pun):
untuk daftar 10 item, menghasilkan:
Jumlah kontainer dapat dengan cepat dikodekan menjadi fungsi pengontrol:
JS (ES6)
HTML
Pendekatan ini menghindari duplikasi markup item (
<span>{{item.name}}</span>
dalam hal ini) di template sumber - bukan kemenangan besar untuk rentang sederhana, tetapi untuk struktur DOM yang lebih kompleks (yang saya miliki) ini membantu menjaga template KERING.sumber
Perbarui 2019 - Bootstrap 4
Karena Bootstrap 3 menggunakan float, diperlukan clearfix mengatur ulang setiap n (3 atau 4) kolom (
.col-*
).row
untuk mencegah pembungkusan kolom yang tidak rata.Sekarang Bootstrap 4 menggunakan flexbox , tidak perlu lagi membungkus kolom dalam
.row
tag terpisah , atau untuk memasukkan div tambahan untuk memaksa kolom membungkus setiap n. kolom.Anda cukup mengulangi semua kolom dalam satu
.row
wadah.Misalnya 3 kolom di setiap baris visual adalah:
Jadi untuk Bootstrap ng-repeat cukup:
Demo: https://www.codeply.com/go/Z3IjLRsJXX
sumber
Saya melakukannya hanya dengan boostrap, Anda harus sangat berhati-hati di lokasi baris dan kolom, ini contoh saya.
sumber