Sunday, March 19, 2017

Tips dan Trick Accordion di AngularJs

Beberapa waktu lalu, penulis mengalami kesulitan bagaimana menampilkan semua field yang di butuhkan dalam 1 halaman form? Bukankah akan menjadi amat sangat panjang ke bawah, sebagai user pun juga akan malas untuk kembali men - scroll ke atas untuk mengkroscek kembali dan memastikan bahwa tidak ada filed yang masih kosong. Setelah mencoba berbagai cara maka penulis menentukan pilihan pada accordion.


Mengapa accordion??
Semua field dapat masuk dalam 1 halaman form tanpa harus pindah halaman. Terlihat simpel namun rapi dan penggunaan nya pun sederhana, karena sudah ada directive nya pada AngularJs hanya tinggal memanggil saja directive tersebut. Eiiitss, ada yang menjadi perhatian lagi nih...
Kita mulai dulu aja dari bagaimana memanggil directive accordion tersebut.



Pemakaian Accordion sama seperti memakai div. Secara keseluruhan accordion di bungkus dengan class uib-accordion , kemudian untuk tiap tab nya menggunakan class uib-accordion-group . Setelah semua field terisi dan di submit ternyata value pada field yang ada di dalam accordion undefined. Mengapa bisa begitu?



Jadi untuk mendapatkan value tersebut, value dari field yang di dalam accordion HARUS berupa array. Ng-model yang di kirim ke controller berupa array, yang nanti nya akan di kirimkan ke backend sebagai array pula. Sederhana bukan ... Selamat mencoba dan sampai ketemu di tips dan trick berikutnya :D


No comments:

Post a Comment