Mengenal Directive ng-repeat di Dalam Angular Js

Web Developer | Blogger | Creator of RubyPedia.com

2 November 2017

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.html
app.js
MainController.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: