Dinamis Select Option merupakan dropdown list yang terdapat dalam sebuah form berisi option-option berkaitan. Yang dimaksud berkaitan yaitu saat dipilih bagian parent maka option selanjutnya akan menampilkan data yang berhubungan dengan parentnya. Sebagai contoh kita memilih sebuah category maka akan menampilkan data sub category.

Dalam kasus kali ini kita akan membuat dinamis select option menggunakan AngularJS. Agar tidak terlalu lama mari langsung saja dimulai membuatnya yuk ikuti langkah-langkah berikuti ini:

Langkah pertama:

Sahabat buat database baru kemudian buat 2 tabel seperti tampilan berikut ini

Membuat Dynamic Select Option Menggunakan AngularJS

Untuk isi pada setiap tabel bisa diganti sesuai keinginan sahabat, yang terpenting adalah pada tabel subcategory ada sebuah field category_id karena harus sesuai dengan id pada table category.

Langkah kedua buat file html beri nama index.html:

  • ng-app = myapp (untuk memulai aplikasi dengan nama myapp)
  • ng-init = loadCategory & loadSub_category¬†(untuk inisialisasi data yang berada pada aplikasi)
  • ng-repeat = category in categorys, dll (untuk perulanggan dari elemen HTML untuk setiap item dalam array)
  • untuk value dari ng-app, ng-init, ng-repeat bisa diganti namanya jadi tidak harus seperti yang saya tulis.

Langkah ketiga:

Sekarang tambhakan sebuah script javascript seperti code dibawah ini:

Jadi pada code diatas kita harus mendeklarasikan seperti:

  • mendeklarasikan module pada AngularJS

Untuk deklarasi controller yang di berinama dengan usercontroller. Controller usercontroller akan menampilkan data pada option .

ng-model digunakan untuk mengirim nilai dari view ke controller

untuk menampilkan expression atau hasil dari controller usercontroller.

Saya kira sampai disini dulu dan akan kita sambung kembali pada artikel selanjutnya untuk menampilkan request file dari fungsi yang berada pada $http.get dan $http.post .