Tabel adalah salah satu elemen umum yang digunakan dalam HTML saat bekerja dengan halaman web.
Tabel di HTML dirancang menggunakan tag HTML
Tag
- Ini adalah tag utama yang digunakan untuk menampilkan tabel.
- Tag ini digunakan untuk memisahkan baris dalam tabel.
- Tag ini digunakan untuk menampilkan data tabel yang sebenarnya.
- Ini digunakan untuk data header tabel.
Dengan menggunakan tag HTML yang tersedia di atas bersama dengan AngularJS, kita dapat mempermudah pengisian data tabel. Singkatnya, direktif ng-repeat digunakan untuk mengisi data tabel.
Kami akan melihat bagaimana mencapai ini selama bab ini. Kita juga akan melihat bagaimana kita dapat menggunakan filter orderby dan huruf besar bersama dengan menggunakan atribut $ index untuk menampilkan indeks tabel Angular.
Dalam tutorial ini, Anda akan belajar-
Mengisi & Menampilkan Data dalam Tabel
Filter bawaan AngularJS
Sortir Tabel dengan Filter OrderBy
Tampilan Tabel dengan Filter Huruf Besar
Menampilkan Indeks Tabel ($ index)
Mengisi & Menampilkan Data dalam Tabel
Seperti yang telah kita bahas di pendahuluan bab ini, dasar untuk membuat struktur tabel di halaman HTML tetap sama.
Struktur tabel masih dibuat menggunakan tag HTML biasa yaitu ,
,
dan
. Namun, data diisi dengan menggunakan direktif ng-repeat di AngularJS.
Mari kita lihat contoh sederhana bagaimana kita dapat mengimplementasikan tabel Angular.
Dalam contoh ini,
Kami akan membuat tabel Angular yang akan memiliki topik kursus beserta deskripsinya.
Langkah 1) Pertama-tama kita akan menambahkan tag "gaya" ke halaman HTML kita sehingga tabel dapat ditampilkan sebagai tabel yang sesuai.
Tag gaya ditambahkan ke halaman HTML. Ini adalah cara standar untuk menambahkan atribut pemformatan apa pun yang diperlukan untuk elemen HTML.
Kami menambahkan dua nilai gaya ke tabel kami.
Salah satunya adalah harus ada batas yang solid untuk tabel Angular dan
Kedua adalah bahwa harus ada padding untuk data tabel Angular kita.
Langkah 2) Langkah selanjutnya adalah menulis kode untuk menghasilkan tabel, dan datanya.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Penjelasan Kode:
Kami pertama kali membuat variabel yang disebut "tutorial" dan menetapkan beberapa pasangan nilai kunci dalam satu langkah. Setiap pasangan nilai kunci akan digunakan sebagai data saat menampilkan tabel. Variabel tutorial kemudian ditetapkan ke objek lingkup sehingga dapat diakses dari pandangan kita.
Ini adalah langkah pertama dalam membuat tabel, dan kami menggunakan tag
.
Untuk setiap baris data, kami menggunakan "ng-repeat directive". Arahan ini melewati setiap pasangan nilai kunci di objek lingkup tuto, rial dengan menggunakan variabel ptutor.
Terakhir, kami menggunakan tag
bersama dengan pasangan nilai kunci (ptutor.Name dan ptutor.Description) untuk menampilkan data tabel Angular.
Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
Dari keluaran di atas,
Kita dapat melihat bahwa tabel ditampilkan dengan benar dengan data dari larik pasangan nilai kunci yang ditentukan di pengontrol.
Data tabel dibuat dengan menelusuri masing-masing pasangan nilai kunci menggunakan "perintah ng-repeat".
Filter bawaan AngularJS
Sangat umum menggunakan filter bawaan dalam AngularJS untuk mengubah cara data ditampilkan di tabel. Kami telah melihat filter beraksi di bab sebelumnya. Mari kita buat rekap cepat filter sebelum melanjutkan.
Dalam Angular.JS filter digunakan untuk memformat nilai ekspresi sebelum ditampilkan kepada pengguna. Contoh filter adalah filter 'huruf besar' yang mengambil output string dan memformat string dan menampilkan semua karakter dalam string sebagai huruf besar.
Jadi pada contoh di bawah ini, jika nilai variabel 'TutorialName' adalah 'AngularJS', output dari ekspresi di bawah ini adalah 'ANGULARJS'.
{{TurotialName | huruf besar }}
Di bagian ini, kita akan melihat bagaimana filter orderBy dan huruf besar dapat digunakan dalam tabel secara lebih rinci.
Sortir Tabel dengan Filter OrderBy
Filter ini digunakan untuk mengurutkan tabel berdasarkan salah satu kolom tabel. Dalam contoh sebelumnya, output untuk data tabel Angular kami muncul seperti yang ditunjukkan di bawah ini.
Pengontrol
Pengontrol beraksi
Model
Model dan data binding
Arahan
Fleksibilitas Pengarahan
Mari kita lihat contoh, tentang bagaimana kita dapat menggunakan filter "orderBy" dan mengurutkan data tabel Angular menggunakan kolom pertama dalam tabel.
Event Registration
Guru99 Global Event
{{ptutor.Name}}
{{ptutor.Description}}
Penjelasan Kode:
Kami menggunakan kode yang sama seperti yang kami lakukan untuk membuat tabel kami, satu-satunya perbedaan kali ini adalah kami menggunakan filter "orderBy" bersama dengan arahan ng-repeat. Dalam hal ini, kami mengatakan bahwa kami ingin memesan tabel dengan kunci "Nama".
Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
Dari keluarannya,
Kita dapat melihat bahwa data di tabel Angular telah diurutkan sesuai data di kolom pertama. Dalam kumpulan data kami, data "Direktif" berasal dari data "Model", tetapi karena kami menerapkan filter orderBy, tabel diurutkan sesuai.
Tampilan Tabel dengan Filter Huruf Besar
Kita juga bisa menggunakan filter huruf besar untuk mengubah data di tabel Angular menjadi huruf besar.
Mari kita lihat contoh bagaimana kita bisa mencapai ini.
Event Registration
Guru99 Global Event
{{ptutor.Name | uppercase}}
{{ptutor.Description}}
Penjelasan Kode:
Kami menggunakan kode yang sama seperti yang kami lakukan untuk membuat tabel kami, satu-satunya perbedaan kali ini adalah kami menggunakan filter huruf besar. Kami menggunakan filter ini bersama dengan "ptutor.Name" sehingga semua teks di kolom pertama akan ditampilkan dalam huruf besar.
Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
Dari keluarannya,
Kita dapat melihat bahwa dengan menggunakan filter "huruf besar", semua data di kolom pertama ditampilkan dengan karakter huruf besar.
Menampilkan Indeks Tabel ($ index)
Untuk menampilkan indeks tabel, tambahkan
dengan $ index.
Mari kita lihat contoh bagaimana kita bisa mencapai ini.
Event Registration
Guru99 Global Event
{{$index + 1}}
{{ptutor.Name}}
{{ptutor.Description}}
Penjelasan Kode:
Kami menggunakan kode yang sama seperti yang kami lakukan untuk membuat tabel kami, satu-satunya perbedaan kali ini adalah kami menambahkan baris tambahan ke tabel kami untuk menampilkan kolom indeks.
Di kolom tambahan ini, kami menggunakan properti "$ index" yang disediakan oleh AngularJS dan kemudian menggunakan operator +1 untuk menaikkan indeks untuk setiap baris.
Jika kode berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
Dari keluarannya,
Anda dapat melihat bahwa kolom tambahan telah dibuat. Di kolom ini, kita dapat melihat indeks yang dibuat untuk setiap baris.
Ringkasan:
Struktur tabel dibuat menggunakan tag standar yang tersedia dalam HTML. Data dalam tabel diisi menggunakan direktif "ng-repeat".
Filter orderBy dapat digunakan untuk mengurutkan tabel berdasarkan kolom mana saja di dalam tabel.
Filter huruf besar dapat digunakan untuk menampilkan data dalam kolom berbasis teks dalam huruf besar.
Properti "$ index" dapat digunakan untuk membuat indeks untuk tabel.
Satu masalah umum yang dihadapi selama pengembangan dengan tabel AngularJS.JS adalah implementasi kumpulan data besar yang memiliki 1000+ baris data. Terkadang perintah ng-repeat bisa menjadi non-responsif, dan karenanya seluruh halaman menjadi tidak responsif di waktu-waktu tertentu. Dalam kasus seperti itu, selalu lebih baik untuk memiliki penomoran halaman di mana baris data tersebar di beberapa halaman.
