Membuat Data Looping dengan Angular

Angular adalah framework javascript yang sedang popular saat ini. Keunggulan angular adalah seperti hal umum yang dapat dilakukan javascript seperti melakukan perubahan tampilan secara realtime. Artinya akan terjadi perubahan pada tampilan pada saat itu juga tanpa harus mereload halaman website. Sehingga akan mempersingkat waktu untuk menampilkan data pada halaman website.

Pada pembahasan kali ini kita akan belajar salah satu fitur yang ada pada angular dengan contoh kasus seperti membuat data looping dengan angular. Kita akan membuat suatu tabel data yang berisikan informasi data murid. Jika membuat manual dengan HTML kita akan mengulang perintah untuk tag <td></td>. Pada angular terdapat fungsi ng-repeat. Ng-repeat berfungsi untuk melooping berdasarkan data yang ada.

Agar lebih mudah pemahaman ng-repeat ini mari kita mulai mempraktekanya. Pertama buat file htmlnya seperti code dibawah ini.

index.html

<!DOCTYPE html>
<html ng-app='myTable'>
<head>
	<title>Table</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
	<script src="app.js"></script>
</head>
<body ng-controller='myCtrl'>
	<h1>Table Murid</h1>
	<table border="1">
		<tr>
			<th>Nama</th>
			<th>Kelas</th>
			<th>Nilai</th>
		</tr>
		<tr ng-repeat='s in murid'>
			<td>{{s.nama}}</td>
			<td>{{s.kelas}}</td>
			<td>{{s.nilai}}</td>
		</tr>
	</table>
</body>
</html>

Setelah sudah kalian simpan filenya dengan format html. Sekarang lanjut untuk membuat file angularnya. Kalian buat file baru dengan format javascript lalu ketikan code seperti in.

app.js

var app = angular.module('myTable',[]);

app.controller('myCtrl',function($scope){
	$scope.murid = [{
		nama:'udin',
		kelas:'web master',
		nilai:'80'
	},{
		nama:'samsul',
		kelas:'web programming',
		nilai:'70'
	},{
		nama:'ipul',
		kelas:'web desain',
		nilai:'80'
	},{
		nama:'nusantara',
		kelas:'grafik desain',
		nilai:'80'
	},{
		nama:'indo',
		kelas:'digital marketing',
		nilai:'90'
	},{
		nama:'eskrim',
		kelas:'web master',
		nilai:'80'
	},]
});

Simpan filenya dengan format javascript ya (.js). Lalu file yang telah dibuat barusan harus dalam satu folder yang sama agar dapat berjalan dengan lancar. Sekarang untuk melihatnya kalian bisa buka file html tersebut pada browser kalian. Jika berhasil maka tampilanya akan seperti ini.

membuat-data-looping-dengan-angular-rangga1-160717

Data yang muncul seperti tabel biasa pada umumnya hanya saja jika kita lihat struktur file htmlnya lebih ringkas dan jelas dari pada menulis manual tanpa fungsi looping dari angular. Seperti itu kira-kira contoh pengaplikasian ng-repeat pada angular. Mudah bukan ?

Sekian pembahasn mengenai membuat data looping dengan Angular. Semoga bermanfaat.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published. Required fields are marked *