Jadual adalah salah satu elemen yang biasa digunakan dalam HTML ketika bekerja dengan laman web.
Jadual dalam HTML dirancang menggunakan tag HTML
Tag
- Ini adalah tag utama yang digunakan untuk memaparkan jadual.
- Teg ini digunakan untuk memisahkan baris dalam jadual.
- Tag ini digunakan untuk memaparkan data jadual sebenar.
- Ini digunakan untuk data tajuk jadual.
Dengan menggunakan tag HTML yang ada di atas bersama dengan AngularJS, kami dapat mempermudah untuk mengisi data jadual. Ringkasnya, arahan ng-ulangan digunakan untuk mengisi data jadual.
Kami akan melihat bagaimana mencapainya semasa bab ini. Kami juga akan melihat bagaimana kita dapat menggunakan penapis pesanan dan huruf besar bersama dengan menggunakan atribut $ index untuk memaparkan indeks jadual sudut.
Dalam tutorial ini, anda akan belajar-
Isi & Paparkan Data dalam Jadual
Penapis terbina dalam AngularJS
Susun Jadual dengan OrderBy Filter
Jadual Paparan dengan Penapis Huruf Besar
Paparkan Jadual Indeks ($ indeks)
Isi & Paparkan Data dalam Jadual
Seperti yang telah kita bincangkan dalam pengenalan bab ini, asas untuk membuat struktur jadual dalam halaman HTML tetap sama.
Struktur jadual masih dibuat menggunakan tag HTML biasa iaitu
,
,
dan
. Namun, data diisi dengan menggunakan arahan ng-ulangan di AngularJS.
Mari kita lihat contoh ringkas bagaimana kita dapat melaksanakan jadual sudut.
Dalam contoh ini,
Kami akan membuat jadual sudut yang akan mempunyai topik kursus bersama dengan keterangannya.
Langkah 1) Pertama-tama kita akan menambahkan tag "gaya" ke halaman HTML kita sehingga jadual dapat ditampilkan sebagai jadual yang tepat.
Tag gaya ditambahkan ke halaman HTML. Ini adalah kaedah standard untuk menambahkan atribut pemformatan yang diperlukan untuk elemen HTML.
Kami menambah dua nilai gaya ke meja kami.
Salah satunya adalah bahawa mesti ada sempadan yang kuat untuk jadual sudut kita dan
Kedua adalah bahawa harus ada padding yang disediakan untuk data jadual Sudut kami.
Langkah 2) Langkah seterusnya adalah menulis kod untuk menghasilkan jadual, dan data.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Penjelasan Kod:
Kami mula-mula membuat pemboleh ubah yang disebut "tutorial" dan memberikannya beberapa pasangan kunci-nilai dalam satu langkah. Setiap pasangan nilai-kunci akan digunakan sebagai data ketika memaparkan jadual. Pemboleh ubah tutorial kemudian ditugaskan ke objek lingkup sehingga dapat diakses dari pandangan kami.
Ini adalah langkah pertama dalam membuat jadual, dan kami menggunakan tag
.
Untuk setiap baris data, kami menggunakan "arahan ng-ulangi". Arahan ini melalui setiap pasangan nilai-kunci dalam tuto, rop lingkup objek dengan menggunakan pemboleh ubah ptutor.
Akhirnya, kami menggunakan tag
bersama dengan pasangan kunci-nilai (ptutor.Name dan ptutor.Description) untuk memaparkan data jadual Sudut.
Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.
Pengeluaran:
Dari output di atas,
Kita dapat melihat bahawa jadual dipaparkan dengan betul dengan data dari susunan pasangan nilai-kunci yang ditentukan dalam pengawal.
Data jadual dihasilkan dengan melalui setiap pasangan nilai-kunci dengan menggunakan "ng-repeat Directive".
Penapis terbina dalam AngularJS
Sangat biasa menggunakan penapis terbina dalam AngularJS untuk mengubah cara data dipaparkan dalam jadual. Kami telah melihat saringan dalam tindakan pada bab sebelumnya. Mari kita buat tinjauan semula penapis dengan cepat sebelum kita meneruskannya.
Dalam filter Angular.JS digunakan untuk memformat nilai ekspresi sebelum dipaparkan kepada pengguna. Contoh penapis adalah penapis 'huruf besar' yang mengambil output rentetan dan memformat rentetan dan menampilkan semua watak dalam rentetan sebagai huruf besar.
Jadi dalam contoh di bawah, jika nilai pemboleh ubah 'TutorialName' adalah 'AngularJS', output ungkapan di bawah akan menjadi 'ANGULARJS'.
{{TurotialName | huruf besar}}
Pada bahagian ini, kita akan melihat bagaimana penapis pesanan dengan huruf besar dapat digunakan dalam jadual dengan lebih terperinci.
Susun Jadual dengan OrderBy Filter
Penapis ini digunakan untuk menyusun jadual berdasarkan salah satu lajur jadual. Dalam contoh sebelumnya, output untuk data jadual Sudut kami muncul seperti yang ditunjukkan di bawah.
Pengawal
Pengawal beraksi
Model
Model dan data yang mengikat
Arahan
Fleksibiliti Arahan
Mari kita lihat contohnya, bagaimana kita boleh menggunakan penapis "orderBy" dan menyusun data jadual Sudut menggunakan lajur pertama dalam jadual.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Penjelasan Kod:
Kami menggunakan kod yang sama seperti yang kami lakukan untuk membuat jadual kami, satu-satunya perbezaan kali ini ialah kami menggunakan penapis "orderBy" bersama dengan arahan ng-ulangan. Dalam kes ini, kami mengatakan bahawa kami ingin memesan jadual dengan kunci "Nama".
Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.
Pengeluaran:
Dari output,
Kita dapat melihat bahawa data dalam jadual sudut telah disusun berdasarkan data pada lajur pertama. Dalam kumpulan data kami, data "Arahan" berasal dari data "Model", tetapi kerana kami menggunakan penapis orderBy, jadual disusun dengan sewajarnya.
Jadual Paparan dengan Penapis Huruf Besar
Kita juga dapat menggunakan penapis huruf besar untuk mengubah data dalam tabel Sudut menjadi huruf besar.
Mari kita lihat contoh bagaimana kita dapat mencapainya.
Event Registration
Guru99 Global Event
{{ptutor.Name | uppercase}}
{{ptutor.Description}}
Penjelasan Kod:
Kami menggunakan kod yang sama seperti yang kami buat untuk membuat jadual kami, satu-satunya perbezaan kali ini ialah kami menggunakan penapis huruf besar. Kami menggunakan penapis ini bersama dengan "ptutor.Name" sehingga semua teks di lajur pertama akan dipaparkan dengan huruf besar.
Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.
Pengeluaran:
Dari output,
Kita dapat melihat bahawa dengan menggunakan penapis "huruf besar", semua data pada lajur pertama ditampilkan dengan huruf besar.
Paparkan Jadual Indeks ($ indeks)
Untuk memaparkan indeks jadual, tambahkan
dengan $ index.
Mari kita lihat contoh bagaimana kita dapat mencapainya.
Event Registration
Guru99 Global Event
{{$index + 1}}
{{ptutor.Name}}
{{ptutor.Description}}
Penjelasan Kod:
Kami menggunakan kod yang sama seperti yang kami lakukan untuk membuat jadual kami, satu-satunya perbezaan kali ini ialah kami menambahkan baris tambahan ke meja kami untuk memaparkan lajur indeks.
Dalam lajur tambahan ini, kami menggunakan harta "$ index" yang disediakan oleh AngularJS dan kemudian menggunakan operator +1 untuk meningkatkan indeks untuk setiap baris.
Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.
Pengeluaran:
Dari output,
Anda dapat melihat bahawa lajur tambahan telah dibuat. Di ruangan ini, kita dapat melihat indeks dibuat untuk setiap baris.
Ringkasan:
Struktur jadual dibuat menggunakan tag standard yang terdapat dalam HTML. Data dalam tabel diisi menggunakan arahan "ng-ulangi".
Penapis orderBy boleh digunakan untuk menyusun jadual berdasarkan lajur mana pun di dalam jadual.
Penapis huruf besar dapat digunakan untuk menampilkan data di setiap kolom berbasis teks dengan huruf besar.
Harta "$ index" boleh digunakan untuk membuat indeks untuk jadual.
Satu masalah umum yang dihadapi semasa pembangunan dengan jadual AngularJS.JS adalah pelaksanaan set data besar yang mempunyai 1000+ baris data. Kadang-kadang arahan ng-ulangan boleh menjadi tidak responsif, dan oleh itu seluruh halaman menjadi tidak responsif kadang-kadang. Dalam kes seperti itu, selalu lebih baik mengadakan penomboran di mana baris data tersebar di beberapa halaman.
