Mengenal Directive ng-repeat di Dalam Angular Js
Perulangan for each dibutuhkan untuk mendapatkan isi dari variabel yang terdapat pada suatu koleksi / array. Bagi teman-teman yang sudah familiar dengan bahasa pemrogramman seperti Java, C# maupun PHP pasti sudah mengetahui kegunaanya dan sangat sering menggunakannya.
Pada tutorial kali ini kita akan mencoba menggunakan directive dari angular js yaitu ng-repeat untuk menampilkan suatu data array, oke langsung saja.
Jadi apa saja yang akan kita buat ?
index.htmlapp.jsMainController.js
Buatlah sebuah folder project baru di htdocs (jika menggunakan xampp), kemudian beri nama folder project tersebut dengan belajar-angular-js.
Buatlah sebuah file baru didalam folder tersebut dengan nama index.html, kemudia tuliskan kode berikut ini:
<!DOCTYPE html>
<html>
<head>
<title>Belajar ng-repeat di Angular Js</title>
</head>
<body ng-app="MyApp">
<div ng-controller="MainController">
<h1 style="text-align: center;">{{title}}</h1> <br/>
<div ng-repeat="book in books">
{{book.title}}</br>
{{book.author}}</br>
{{book.harga}}</br>
<hr/>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="MainController.js"></script>
</body>
</html>Selanjutnya buat lagi sebuah file baru dengan nama app.js kemudian masukkan kode berikut ini:
//register angular
var app = angular.module('MyApp', []);Selanjutnya buat satu buah file lagi dengan nama MainController.js dan masukkan kode berikut ini:
app.controller('MainController', ['$scope',
function($scope){
$scope.title = 'Belajar Angular JS';
$scope.books = [
{
title : 'Belajar Angular Js',
author: 'Fika Ridaul Maulayya',
harga : '70.000'
},
{
title : 'Belajar Framework JavaScript',
author: 'Rizqi Maulana',
harga : '120.000'
},
{
title : 'Belajar Ruby on Rails',
author: 'Faisal Mahadi',
harga : '89.000'
}
];
}]);Kemudia coba jalankan projectnya dengan mengetikkan di address bar browser http://localhost/belajar-angular-js, maka kurang lebih tampilannya seperti berikut ini:
Sekilas Tentang Penulis
