AngularJS Menyeleksi Data

This entry is part of 4 in the series AngularJS

Program AngularJS yang sudah kita buat selama ini hanya bisa dilihat, tidak bisa berinterkasi dengan pengguna, diklik pun dia tidak bereaksi apa-apa. Saatnya tugas kita untuk membuatnya sedikit interaktif.

AngularJS

Salah satu hal dasar yang ada pada sebuah aplikasi yang berhubungan dengan data adalah kemampuan untuk memilih data dengan cara diklik kemudian menampilkan detail dari data tersebut. Pada tulisan ini saya akan mendemokannya kepada para pembaca sekalian yang budiman 🙂

Terlebih dahulu kita siapkan Html-nya sebagai berikut, sangat sederhana

File aplikasi.js yang memuat fungsi untuk controller mirip dengan yang sebelumnya ada pada tulisan-tulisan kemarin hanya sedikit perbedaannya, perhatikan pada kode di bawah ini

Pada kode di atas saya tuliskan nama module dan juga fungsi controller, ini sudah ada pada tulisan yang lalu jadi saya anggap para pembaca sudah paham. Kemudian yang saya highlight adalah kode yang perlu diperhatikan dan memegang peranan kunci di sini.

Baris 28 merupakan variabel yang digunakan untuk menyimpan data buku yang terseleksi. Jadi nanti akan ada beberapa judul buku yang terpampang pada halaman web dan ketika salah satu judul buku tersebut diklik maka akan dimunculkan data detailnya. Untuk bisa mencapai hal tersebut maka buku yang diklik harus disimpan terlebih dahulu pada variabel untuk dimunculkan kemudian.

Baris 30-31 adalah sebuah fungsi yang digunakan untuk memberikan nilai pada variabel selectedBuku tadi, atau bahasa lainnya setter.

Sekarang coba jalankan pada browser. Kurang lebih seperti ini hasilnya
tampilan awal

Tentu saja ketika diklik belum muncul apa-apa karena kita belum menambahkan event klik pada daftar judul buku. Oke sekarang kita tambahkan. Tadi pada baris 30-31 pada file aplikasi.js telah kita buat fungsi setter, nah mari kita manfaatkan. Tambahkan directive ng-click dengan fungsi setter sebagai nilainya dan kode buku sebagai parameter fungsi pada daftar buku. Perhatikan potongan kode di bawah

Dengan kode di atas begitu salah satu judul buku diklik maka data detail akan tersimpan pada variabel selectedBuku. Untuk menampilkan data buku yang terpilih perlu kita tambahkan beberapa buah baris pada Html seperti di bawah ini

Coba klik pada salah satu judul buku, berikut adalah hasilnya

Buku JavaEE dipilih
java ee

Buku Javascript dipilih
javascript

Sekian tutorial AngularJS dari saya mengenai cara menyeleksi data untuk ditampilkan detailnya.
Semoga bermanfaat dan sampai jupa pada tulisan saya selanjutnya.

Facebook Comments
 

Agung Setiawan

Agung Setiawan adalah software engineer di BukaLapak.com, penulis sekaligus pecinta sastra, dan pembaca buku

 
Halo, perkenalkan saya Agung Setiawan.
Saya Software Engineer di BukaLapak.
Simak pemikian saya soal dunia Software Engineering via Twitter di @agungsetiawanmu dan facebook
Blog ini saya update seminggu sekali jadi sering-sering saja mampir
Mau belajar Vim bareng saya?
Belajar ngoding dari nol menggunakan PHP

7 thoughts on “AngularJS Menyeleksi Data

Leave a Reply

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