Hallo teman – teman, apa kabar semuanya. Kembali lagi dengan saya di tutorial Dumet School, pada artikel kali ini kita akan belajar Cara Looping dengan Angularjs. Looping dengan angularjs pada dasarnya sama dengan looping pada PHP, biasanya kita memakai looping PHP menggunakan for, while dll. Hanya saja pengodeannya yang berbeda, kali ini kita akan latihan looping dimana ada beberapa nama yang akan kita looping. Berikut ini adalah demo gambar nya yang nanti kita akan buat
Langsung saja teman-teman siapkan text editornya lalu copy script html nya di bawah ini
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <title>Cara looping dengan angularjs</title> </head> <body> <div> <p>Looping dengan AngularJS</p> <ul> <li> </li> </ul> </div> </body> </html> |
Kemudian save dengan nama index.html, langkah berikutnya kita akan implementasikan Cara Looping dengan Angularjs, pertama masukkan library angularjs nya atau bisa ambil di https://angularjs.org/
Kemudian ketikkan persis seperti gambar di bawah ini
Jika sudah save dan jalankan pada browsernya, maka looping nama berhasil di jalankan. Looping di angularjs hampir sama dengan fungsi array pada php kemudian di looping oleh fungsi for/while dll, nah di angularjs ini caranya pun sama. Tetapi di angularjs ini kita inisialisasikan terlebih dahulu
Dan kemudian akan di panggil dan di looping oleh ng-repeat
Di dalam ng-repeat saya beri name untuk melooping, saya berikan Looping untuk melooping dan akan di tampilkan di dalam tag <li> “in” adalah fungsi yang di miliki oleh angularjs dan untuk memanggil nama yang tadi kita inisialisasikan dengan ng-init. Kemudian tinggal di cetak dengan name Looping
Maka hasilnya adalah
Mudah sekali bukan, kalian juga bisa mencobanya sendiri dan memodifikasinya dengan looping yang lain menggunakan angularjs agar teman – teman makin tahu fungsi-fungsi yang ada pada angularjs khususnya kalian yang baru belajar framework angularjs.
oke sekian dulu pada tutorial kali ini tentang Cara Looping dengan Angularjs kita jumpa lagi pada artikel berikutnya, semoga bermanfaat dan bisa menambah pengetahuannya tentang angularjs nya.
Terima Kasih dan Sampai Jumpa.
Indahnya berbagi 🙂