Edit Inline adalah suatu kegiatan edit atau merubah data dengan posisi di baris yang tetap pada data yang akan di ubah. Dan pada kesempatan kali ini akan saya bahas Cara Membuat Edit Inline Dengan AngularJs Part1. Dimana saya memiliki table data dan saya melakukan edit atau ubah data di dalam table data langsung dan di baris yang sama.

Untuk tampilan tabel pada artikel tentangĀ Cara Membuat Edit Inline Dengan AngularJs Part1 saya membuatnya dengan menggunakan bootstrap seperti pada script di bawah ini.

Karena disini saya akan edit langsung di dalam table data maka saya gunakan ng-template untuk mengubah tampilan data ketika di edit menggunakan tag input. Sebelumnya saya sudah sediakan ng-repeat=”data in namesData” untuk melooping datanya. Dan ” ng-include=”getTemplate(data)” untuk mengubah templatenya.

Kita lanjutkan untuk menampilkan data terlebih dahulu dan berikut ini scriptnya.

Didalam controller saya sudah membuat fungsi fetchData() untuk menampilkan datanya. Dan untuk menjalankan fungsi tersebut saya berikan ng-init=”fetchData()” di tag body. Selanjutnya kita buat file baru dengan nama data.php untuk mengambil data dari database.

Oke, langkah terakhir untuk menampilkan datanya kita buat terlebih dahulu ng-template display untuk menampilkan data dan ng-template edit untuk tampilan edit data.

Pembahasannya akan kita sambung pada artikel Cara Membuat Edit Inline Dengan AngularJs Part2. Demikian artikel tentang Cara Membuat Edit Inline Dengan AngularJs Part1. Terima Kasih