Tutorial AngularJS #13 : AngularJS Tables
AngularJS Tables
Tentu saja! Di sini contoh penggunaan AngularJS untuk membuat tabel di aplikasi web:
HTML:
htmlCopy code
<html ng-app="tableApp">
<head>
<title>Contoh Tabel AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="TableController as tableCtrl">
<table>
<thead>
<tr>
<th>ID</th>
<th>Nama</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in tableCtrl.users">
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
JavaScript (app.js):
javascriptCopy code
angular.module('tableApp', [])
.controller('TableController', function() {
this.users = [
{ id: 1, name: 'Alice', email: 'alice@example.com' },
{ id: 2, name: 'Bob', email: 'bob@example.com' },
{ id: 3, name: 'Charlie', email: 'charlie@example.com' }
// Tambahkan pengguna lain sesuai kebutuhan
];
});
Dalam contoh ini, directive ng-app mendefinisikan aplikasi AngularJS, sedangkan directive ng-controller menentukan controller yang bertanggung jawab atas tabel. Directive ng-repeat akan mengulang array users dalam controller dan mengisi baris tabel dengan data pengguna.
Pastikan Anda menyertakan pustaka AngularJS di HTML Anda (dalam contoh ini, melalui CDN) dan mendefinisikan modul AngularJS serta controller dalam file JavaScript terpisah (app.js dalam contoh ini).
Ingatlah bahwa ini hanya merupakan contoh dasar. Pada aplikasi nyata, Anda mungkin akan mengambil data dari server menggunakan layanan atau directive untuk meningkatkan fungsionalitas atau penampilan tabel. AngularJS juga menawarkan fitur-fitur seperti filter, penyortiran, dan pembagian halaman yang dapat diterapkan pada tabel untuk pengalaman pengguna yang lebih baik.
Tags:
Populer
Ready to start?
Download our mobile app. for easy to start your course.
