Tabel AngularJS: Penyortiran, Urutan Berdasarkan & Filter Huruf Besar [Contoh]

Oleh: James Hartman James Hartman
Hours Updated

Tabel adalah salah satu elemen umum yang digunakan dalam HTML saat bekerja dengan halaman web.

Tabel dalam HTML dirancang menggunakan tag HTML

  1. tag – Ini adalah tag utama yang digunakan untuk menampilkan tabel.
  2. – Tag ini digunakan untuk memisahkan baris dalam tabel.
  3. – Tag ini digunakan untuk menampilkan data tabel sebenarnya.
  4. – 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 mencapai hal ini dalam 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.

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 bisa mengimplementasikan tabel Angular.
Dalam contoh ini,

Kita akan membuat tabel Angular 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.

Isi & Tampilkan Data dalam Tabel

  1. Tag gaya ditambahkan ke halaman HTML. Ini adalah cara standar untuk menambahkan atribut pemformatan apa pun yang diperlukan untuk elemen HTML.
  2. Kami menambahkan dua nilai gaya ke tabel kami.
  • Salah satunya adalah harus ada batas yang kokoh untuk tabel Angular kita dan
  • Kedua adalah harus ada padding untuk data tabel Angular kita.

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

Isi & Tampilkan Data 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">
            <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>

Penjelasan Kode

  1. 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.
  2. Ini adalah langkah pertama dalam membuat tabel, dan kami menggunakan menandai.
  3. Untuk setiap baris data, kami menggunakan “ng-repeat directive”. Arahan ini melewati setiap pasangan nilai kunci dalam objek cakupan tutorial dengan menggunakan variabel ptutor.
  4. Akhirnya, kami menggunakan tag bersama dengan pasangan nilai kunci (ptutor.Name dan ptutor.Description) untuk menampilkan data tabel Angular.

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

Keluaran

Isi & Tampilkan Data dalam Tabel

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”.

ARTIKEL TERKAIT

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.

Di Angular.JS, filter digunakan untuk memformat nilai ekspresi sebelum ditampilkan kepada pengguna. Contoh filter adalah filter 'huruf besar' yang mengambil keluaran string dan memformat string serta 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'.

{{ TurotialName | uppercase }}

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

Urutkan Tabel dengan Filter OrderBy

Filter ini digunakan untuk mengurutkan tabel berdasarkan salah satu kolom tabel. Pada contoh sebelumnya, output untuk data tabel Angular kita muncul 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 bisa menggunakan filter “orderBy” dan mengurutkan data tabel Angular menggunakan kolom pertama dalam tabel.

Urutkan Tabel dengan Filter OrderBy

<!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>

Penjelasan Kode

  1. 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

Urutkan Tabel dengan Filter OrderBy

Dari keluarannya,

  • Kita dapat melihat bahwa data pada tabel Angular telah diurutkan sesuai dengan data pada kolom pertama. Dalam kumpulan data kami, data "Petunjuk" berasal dari data "Model", namun karena kami menerapkan filter orderBy, tabel akan diurutkan sesuai dengan itu.

Tampilkan 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 dapat mencapai hal ini.

Tampilkan Tabel dengan Filter Huruf Besar

<!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>

Penjelasan Kode

  1. 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

Tampilkan Tabel dengan Filter Huruf Besar

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 a dengan $index.

Mari kita lihat contoh bagaimana kita dapat mencapai hal ini.

Menampilkan Indeks 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">
            <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>

Penjelasan Kode

  1. 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

Menampilkan Indeks Tabel

Dari keluarannya,

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

Kesimpulan

  • Struktur tabel dibuat menggunakan tag standar yang tersedia di dalamnya HTML. Data dalam tabel diisi menggunakan arahan “ng-repeat”.
  • Filter orderBy dapat digunakan untuk mengurutkan tabel berdasarkan kolom mana pun dalam tabel.
  • Filter huruf besar dapat digunakan untuk menampilkan data di kolom berbasis teks apa pun dalam huruf besar.
  • Properti “$index” dapat digunakan untuk membuat indeks tabel.
  • Salah satu masalah umum yang dihadapi selama pengembangan tabel AngularJS.JS adalah implementasi kumpulan data besar yang memiliki 1000+ baris data. Terkadang ng-ulangi direktif bisa menjadi tidak responsif, dan karenanya seluruh halaman terkadang menjadi tidak responsif. Dalam kasus seperti itu, selalu lebih baik untuk memiliki penomoran halaman di mana baris data tersebar di beberapa halaman.

Anda mungkin ingin: