Sebelumnya kita sudah membuat tampilan tabel data dengan menggunakan bootstrap dan membuat fungsi untuk menampilkan data pada artikel tentang Cara Membuat Edit Inline Dengan AngularJs Part1. Dan pada kesempatan kali ini tentang Cara Membuat Edit Inline Dengan AngularJs Part2 kita akan melanjutkan pembahasannya dengan membuat fungsi ubah template atau edit data.

Didalam template display saya memberikan ng-click=”showEdit(data)” untuk mengubah tampilan table dengan memberikan tag input di dalamnya dan ng-click=”editData()” saya berikan di template edit untuk menjalankan fungsi update data ke database dan ng-click=”reset()” untuk melakukan cancel atau batal edit.

Langsung saja kita akan buat fungsi getTemplate() di dalam controller yang sudah dibuat. Dimana didalamnya terdapat sebuah kondisi untuk merubah template edit atau display.

Jika sudah kita lanjutkan membuat fungsi showEdit() agar ketika kita melakukan klik pada tombol edit maka tag input akan ada value atau data sesuai id yang kita klik dimana data di ambil dari formData menggunakan angular.copy.

Dan berikut saya akan membuat fungsi reset untuk tombol cancel seperti berikut ini.

Jika sudah maka fungsi terakhir yang kita buat di dalam controller yaitu untuk edit atau merubah data ke dalam database ketika kita melakukan klik di tombol save.

Jika data berhasil diedit maka akan tampil alert yang berisi data berhasil di edit. Setalh semua fungsi yang kita butuhkan sudah semua di buat, maka langkah terakhir Cara Membuat Edit Inline Dengan AngularJs Part2 kita akan buat file editdata.php untuk melakukan request update atau edit data langsung ke database kita. Seperti script di bawah ini.

Jika teman-teman buka di browser maka tampilannya akan seperti gambar di bawah ini.

Cara Membuat Edit Inline Dengan AngularJs Part2

Demikian artikel tentang Cara Membuat Edit Inline Dengan AngularJs Part2. Semoga dapat bermanfaat dan selamat mencoba.