Hallo sobat, apa kabar semua. Kembali lagi dengan saya di tutorial Dumet School, pada artikel kali ini saya akan memberikan tips dan trik tentang Cara input dan tampil data Dengan Angularjs. Dimana sebuah tag input dengan html dan kita kolaborasikan dengan Angularjs untuk input data dan menampilkan data, dan langkah-langkahnya akan saya jelaskan. Demonya seperti gambar di bawah ini

Cara input dan tampil data Dengan Angularjs

Seperti yang kalian lihat pada gambar di atas ini, masing-masing inputan terlihat ada border nya berwarna merah. Itu adalah fungsi Javascript yaitu fungsi required, mengharuskan user input seluruh form kemudian ketika di input data akan di tampung dan di tampilkan. Oke langsung saja kita mulai belajar Cara input dan tampil data Dengan Angularjs, seprti biasa siapkan text editornya lalu copy script html nya di bawah ini

Kemudian tambahkan style css nya

Jika sudah save dan jalankan pada browsernya, maka hasil sementara seperti gambar di bawah ini

Cara input dan tampil data Dengan Angularjs

Langkah berikutnya kita berikan fungsi-fungsi Angularjs nya, pertama-tama berikan library Angularjs terlebih dahulu

Kemudian kita aktifkan Angularjs nya dengan cara, tambahkan script html nya seperti gambar di bawah ini

Cara input dan tampil data Dengan Angularjs

Jika sudah, sekarang kita tambahkan fungsi untuk mengaktifkan input dan view nya

Teman-teman tambahkan script di atas ini pada text editornya, jika sudah save dan refresh pada browsernya.

Cara input dan tampil data Dengan Angularjs

Maka required sudah aktif ketika kita inputkan data hanya 2 form saja required akan memberikan tampilan “Please fill out this field” mengharuskan user input semua form

Cara input dan tampil data Dengan Angularjs

Jika sudah terpenuhi maka data akan di tampilkan jika di klik button add

Cara input dan tampil data Dengan Angularjs

Bagaimana,,?? Cukup mudah bukan..??

Baik, sekian dulu pada artikel kali ini tentang Cara input dan tampil data Dengan Angularjs kita jumpa lagi di artikel berikutnya. Teman-teman juga bisa memodifikasinya sendiri supaya lebih mahir dalam mempelajari dalam Angularjs. Terima Kasih dan Sampai Jumpa

Semoga bermanfaat 🙂