Bisakah AI mengkonversi tabel AngularJS ke Angular modern?

Alat AI menulis ulang ng-repeat sebagai blok kontrol aliran dan memindahkan filter ke dalam pipe atau sinyal. Karena Angular tidak memiliki pipe orderBy atau filter bawaan, tinjau setiap pengurutan dan pencarian yang dihasilkan secara manual.

Tabel AngularJS: Urutkan dengan orderBy & Filter Huruf Besar

⚡ Ringkasan Cerdas

Pengurutan, penataan, dan pemformatan teks pada tabel AngularJS semuanya bergantung pada direktif ng-repeat ditambah ekspresi filter. Halaman ini menunjukkan bagaimana orderBy, uppercase, filter, dan $index mengubah tabel HTML biasa menjadi grid yang dinamis dan berbasis data.

🧱 Struktur: Tag `table`, `tr`, `td`, dan `th` tetap membentuk grid, sehingga tidak ada markup khusus AngularJS yang menggantikan HTML standar.
🔁 Populasi: Direktif ng-repeat menelusuri array pada objek scope dan mengeluarkan satu baris untuk setiap item yang ditemukannya.
️ Pemesanan: Filter orderBy mengurutkan baris berdasarkan kunci apa pun, dan flag reverse membalik arah sesuai permintaan.
🔤 Pemformatan: Filter huruf besar mengubah satu kolom menjadi huruf kapital tanpa mengubah data yang mendasarinya di dalam controller.
🔎 Mencari: Filter yang terikat pada input ng-model mempersempit baris yang terlihat saat pembaca mengetik.
🔢 Penomoran: Properti $index menyediakan penghitung berbasis nol, sehingga menambahkan satu akan menghasilkan nomor baris yang mudah dibaca.
🚀 Skala: Jika melebihi seribu baris, pasangkan limitTo dengan pagination dan track untuk menjaga agar halaman tetap responsif.

Baca Selengkapnya

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 sebenarnya.
– Ini digunakan untuk data header tabel.

Menggunakan tag HTML yang tersedia di atas beserta AngularJS, kita dapat mempermudah pengisian data tabel. Singkatnya, direktif ng-repeat digunakan untuk mengisi data tabel.

Kita akan melihat bagaimana cara mencapainya selama bab ini. Kita juga akan melihat bagaimana kita dapat menggunakan filter orderBy dan uppercase bersama dengan menggunakan atribut $index untuk menampilkan indeks tabel AngularJS. Langkah pertama adalah markup itu sendiri.

Isi & Tampilkan Data dalam Tabel

Seperti yang kita bahas di pendahuluan bab ini, dasar untuk membuat struktur tabel di halaman HTML tetap sama.

Struktur tabel masih dibuat menggunakan tag HTML biasa , , Dan . Namun, data diisi dengan menggunakan arahan ng-repeat di AngularJS.
Mari kita lihat contoh sederhana bagaimana kita dapat mengimplementasikan tabel AngularJS.
Dalam contoh ini,

Kita akan membuat tabel AngularJS yang berisi topik kursus beserta deskripsinya.

Langkah 1) Pertama-tama kita akan menambahkan tag “style” ke halaman HTML kita sehingga tabel dapat ditampilkan sebagai tabel yang tepat.

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 AngularJS kita dan
Kedua, perlu ditambahkan padding untuk data tabel AngularJS kita.

Langkah 2) Langkah selanjutnya adalah menulis kode untuk menghasilkan tabel, dan datanya.

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial">
            <td>{{ptutor.Name}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

⚠️ Peringatan: Daftar ini direproduksi persis seperti yang diterbitkan, dan terdapat empat baris di dalamnya yang salah. chrset salah eja charsetTiga proses build AngularJS dimuat sekaligus, yang mana satu proses terlalu banyak. lib/bootstrap.js ke lib/bootstrap.css tidak ada. Simpan angular.min.js saja.

Code Penjelasan

Pertama-tama kita membuat variabel bernama "tutorial" dan menugaskannya beberapa pasangan nilai kunci dalam satu langkah. Setiap pasangan nilai kunci akan digunakan sebagai data saat menampilkan tabel. Variabel tutorial kemudian ditugaskan ke objek lingkup sehingga dapat diakses dari tampilan kita.
Ini adalah langkah pertama dalam membuat tabel, dan kami menggunakan menandai.
Untuk setiap baris data, kami menggunakan “ng-repeat directive”. Arahan ini melewati setiap pasangan nilai kunci dalam objek cakupan tutorial dengan menggunakan variabel ptutor.
Akhirnya, kami menggunakan tag bersama dengan pasangan nilai kunci (ptutor.Name dan ptutor.Description) untuk menampilkan data tabel AngularJS.

Jika kode berhasil dieksekusi, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.

Keluaran

Dari keluaran di atas,

Kita dapat melihat bahwa tabel ditampilkan dengan benar dengan data dari array pasangan nilai kunci yang ditentukan di pengontrol.
Data tabel dihasilkan dengan menelusuri masing-masing pasangan nilai kunci dengan menggunakan “arahan ng-repeat”.

Baris data mentah hanyalah titik awal, karena filter menentukan bagaimana baris-baris tersebut diurutkan dan diformat.

Filter bawaan AngularJS

Sangat umum untuk menggunakan filter bawaan dalam AngularJS untuk mengubah cara data ditampilkan dalam tabel. Kita telah melihat filter beraksi di bab sebelumnya. Mari kita rekap singkat filter sebelum melanjutkan.

Dalam AngularJS, filter digunakan untuk memformat nilai ekspresi sebelum ditampilkan kepada pengguna. Contoh filter adalah filter 'uppercase' yang menerima output berupa string, memformat string tersebut, 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 akan menjadi 'ANGULARJS'.

Di bagian ini, kita akan melihat bagaimana filter orderBy dan huruf besar dapat digunakan dalam tabel secara lebih detail.

Filter AngularJS Umum yang Digunakan dengan Tabel

Tabel di bawah ini membandingkan filter yang paling sering digunakan di dalam ekspresi ng-repeat.

Filter	Tujuan	Example
pesan oleh	Mengurutkan baris berdasarkan kunci	`\| orderBy : 'Name'`
menyaring	Menjaga agar baris tetap cocok	`\| filter : searchText`
huruf besar	Mengkapitalisasi teks	`\| uppercase`
huruf kecil	Menurunkan teks	`\| lowercase`
batasi	Jumlah baris Caps	`\| limitTo : 25`
mata uang	Format uang	`\| currency : '$'`
tanggal	Format tanggal	`\| date : 'dd MMM yyyy'`
jumlah	Mengatur angka desimal	`\| number : 2`

Pengurutan adalah filter yang pertama kali diminta oleh pembaca, jadi filter orderBy muncul berikutnya.

Urutkan Tabel dengan Filter OrderBy

Filter ini digunakan untuk mengurutkan tabel berdasarkan salah satu kolom tabel. Pada contoh sebelumnya, output data tabel AngularJS kita tampak seperti yang ditunjukkan di bawah ini.

controller	Pengendali sedang beraksi
Model	Model dan data yang mengikat
Direktif	Fleksibilitas Arahan

Mari kita lihat contoh bagaimana kita dapat menggunakan filter “orderBy” dan mengurutkan data tabel AngularJS menggunakan kolom pertama dalam tabel.

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial | orderBy : 'Name'">
            <td>{{ptutor.Name}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

Code Penjelasan

Kami menggunakan kode yang sama seperti yang kami lakukan untuk membuat tabel, satu-satunya perbedaan kali ini adalah kami menggunakan filter “orderBy” bersama dengan direktif ng-repeat. Dalam hal ini, kami mengatakan bahwa kami ingin mengurutkan tabel dengan kunci “Nama”.

Jika kode berhasil dieksekusi, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.

Keluaran

Dari keluarannya,

Kita dapat melihat bahwa data dalam tabel AngularJS telah diurutkan sesuai dengan data di kolom pertama. Array dideklarasikan dalam urutan Controller, Model, Directive, jadi tanpa filter, baris-baris tersebut muncul dalam urutan tersebut. Menerapkan orderBy : 'Name' Mengatur nilai Nama secara alfabetis, yang menempatkan Direktif di depan Model dan menghasilkan Pengontrol, Direktif, Model.

Urutkan Reverse dan Dari Header Kolom

Filter orderBy menerima argumen kedua. Melewatkan true membalikkan arah, dan menyimpan kunci serta flag tersebut pada scope memungkinkan pembaca untuk mengurutkan ulang tabel dengan mengklik header, seperti halnya Urutkan berdasarkan referensi menjelaskan.

<table>
    <tr>
        <th ng-click="sortKey='Name'; reverse=!reverse">Name</th>
        <th ng-click="sortKey='Description'; reverse=!reverse">Description</th>
    </tr>
    <tr ng-repeat="ptutor in tutorial | orderBy : sortKey : reverse">
        <td>{{ptutor.Name}}</td>
        <td>{{ptutor.Description}}</td>
    </tr>
</table>

Pengaturan urutan mengubah susunan baris. Filter berikutnya mengubah cara pembacaan satu kolom.

Tampilkan Tabel dengan Filter Huruf Besar

Kita juga dapat menggunakan filter huruf besar untuk mengubah data dalam tabel AngularJS menjadi huruf besar.

Mari kita lihat contoh bagaimana kita dapat mencapai hal ini.

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial">
            <td>{{ptutor.Name | uppercase}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

Code Penjelasan

Kami menggunakan kode yang sama seperti yang kami lakukan untuk membuat tabel, 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 dieksekusi, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.

Keluaran

Dari keluarannya,

Kita dapat melihat bahwa dengan menggunakan filter “huruf besar”, semua data di kolom pertama ditampilkan dengan karakter huruf besar.

Memformat kolom itu berguna, dan pembaca sering kali menginginkan nomor baris di sampingnya.

Menampilkan Indeks Tabel ($index)

Untuk menampilkan indeks tabel, tambahkan a dengan $index.

Mari kita lihat contoh bagaimana kita dapat mencapai hal ini.

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">

</head>
<body>
<title>Event Registration</title>
<style>
    table,th,td{
        border: 1px solid grey;
        padding:5px;
    }
</style>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>

<h1> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <table>
        <tr ng-repeat="ptutor in tutorial">
            <td>{{$index + 1}}</td>
            <td>{{ptutor.Name}}</td>
            <td>{{ptutor.Description}}</td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope) {

        $scope.tutorial = [
            {Name:"Controllers",Description :"Controllers in action"},
            {Name:"Models",Description :"Models and binding data"},
            {Name:"Directives",Description :"Flexibility of Directives"}
        ]});
</script>
</body>
</html>

Code Penjelasan

Kami menggunakan kode yang sama seperti yang kami lakukan untuk membuat tabel, 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” disediakan oleh AngularJS dan kemudian menggunakan operator +1 untuk menaikkan indeks untuk setiap baris.

Jika kode berhasil dieksekusi, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.

Keluaran

Dari keluarannya,

Anda dapat melihat bahwa kolom tambahan telah dibuat. Di kolom ini, kita bisa melihat indeks yang dibuat untuk setiap baris.

Tiga baris muat dalam satu layar. Kumpulan data yang realistis tidak demikian, jadi pembaca membutuhkan cara untuk mencarinya.

Cara Memfilter dan Mencari Data Tabel AngularJS

AngularJS menyediakan filter bernama filterDitempatkan setelah ng-repeat, kode ini membandingkan setiap item dalam array dengan suatu nilai dan hanya menyimpan baris yang cocok. Ikat nilai tersebut ke kotak teks dengan ng-model dan tabel akan menyempit dengan sendirinya saat pembaca mengetik, tanpa penanganan event dan tanpa kode controller.

Tambahkan Pencarian Langsung Box

Tambahkan satu input di atas tabel dan salurkan array melalui filter. Keduanya memiliki properti scope yang sama, sehingga AngularJS mengevaluasi ulang ekspresi pada setiap penekanan tombol.

<input type="text" ng-model="searchText" placeholder="Search topics">

<table>
    <tr ng-repeat="ptutor in tutorial | filter : searchText">
        <td>{{ptutor.Name}}</td>
        <td>{{ptutor.Description}}</td>
    </tr>
</table>

Code Penjelasan:

Input akan menulis apa pun yang diketikkan ke dalamnya. searchText pada lingkup tersebut.
filter : searchText menyimpan baris yang Namanya atau Description tersebut mengandung substring itu, dengan mengabaikan perbedaan huruf besar dan kecil.
Untuk mencari di satu kolom saja, berikan sebuah objek: filter : {Name : searchText}.
Filter berantai, jadi | filter : searchText | orderBy : 'Name' Pencarian dilakukan terlebih dahulu, kemudian menyortir para penyintas.

Jaga Agar Tabel Besar Tetap Responsif

Salah satu masalah umum yang ditemui selama pengembangan tabel AngularJS adalah kumpulan data besar yang berisi seribu baris atau lebih. ng-ulangi Direktif tersebut membuat cakupan dan pengawas per baris, sehingga halaman dapat berhenti merespons. Sebaliknya, sebarkan baris-baris tersebut ke beberapa halaman, dan tambahkan track by sehingga baris yang sudah ada digunakan kembali daripada dibangun ulang.

<tr ng-repeat="ptutor in tutorial | filter : searchText | limitTo : 25 track by ptutor.Name">

Pertanyaan Umum Demo Slot

ng-repeat membutuhkan kunci unik untuk setiap baris. Dua nilai yang identik akan menimbulkan kesalahan duplikat. Tambahkan properti distinct, atau tulis track berdasarkan $index sehingga posisi baris menjadi kunci, bukan nilainya.

Ya. Lewatkan array kunci, seperti orderBy : ['Nama','Description']. AngularJS mengurutkan berdasarkan kunci pertama, kemudian memecahkan kesamaan dengan kunci kedua. Tambahkan tanda minus di depan kunci untuk membalikkan urutan hanya pada kunci tersebut.

Setiap baris ng-repeat mengekspos boolean $even dan $odd. Ikat salah satunya dengan ng-class atau ng-if untuk menerapkan warna latar belakang, yang menghasilkan baris bergaris tanpa pemilih CSS tambahan pada tabel.

Asisten seperti Kopilot GitHub Meskipun mereka membuat kerangka markup ng-repeat dengan cepat, mereka masih saja membuat jalur skrip yang tidak perlu dan salah mengeja atribut. Verifikasi setiap saran terhadap... Referensi filter AngularJS sebelum kapalping.

Alat AI menulis ulang ng-repeat sebagai blok kontrol aliran dan memindahkan filter ke dalam pipa atau sinyal. Karena Kaku tidak memiliki fungsi orderBy atau filter bawaan, setiap pengurutan dan pencarian yang dihasilkan harus ditinjau secara manual.

Tabel AngularJS: Urutkan dengan orderBy & Filter Huruf Besar

Isi & Tampilkan Data dalam Tabel

Code Penjelasan

Keluaran

Filter bawaan AngularJS

Filter AngularJS Umum yang Digunakan dengan Tabel

Urutkan Tabel dengan Filter OrderBy

Code Penjelasan

Keluaran

Urutkan Reverse dan Dari Header Kolom

Tampilkan Tabel dengan Filter Huruf Besar

Code Penjelasan

Keluaran

Menampilkan Indeks Tabel ($index)

Code Penjelasan

Keluaran

Cara Memfilter dan Mencari Data Tabel AngularJS

Tambahkan Pencarian Langsung Box

Jaga Agar Tabel Besar Tetap Responsif

Pertanyaan Umum Demo Slot

Ringkaslah postingan ini dengan:

Mendaftar untuk buletin

Isi & Tampilkan Data dalam Tabel

Code Penjelasan

Keluaran

Filter bawaan AngularJS

Filter AngularJS Umum yang Digunakan dengan Tabel

Urutkan Tabel dengan Filter OrderBy

Code Penjelasan

Keluaran

Urutkan Reverse dan Dari Header Kolom

ARTIKEL TERKAIT

Tampilkan Tabel dengan Filter Huruf Besar

Code Penjelasan

Keluaran

Menampilkan Indeks Tabel ($index)

Code Penjelasan

Keluaran

Cara Memfilter dan Mencari Data Tabel AngularJS

Tambahkan Pencarian Langsung Box

Jaga Agar Tabel Besar Tetap Responsif

Pertanyaan Umum Demo Slot

Ringkaslah postingan ini dengan:

Mendaftar untuk buletin