Share

Directive ng-repeat

Sebagian besar programmer pasti akan menggunakan tabel ketika menampilkan data/record dalam jumlah yang banyak dari database. Hal ini juga untuk mempermudah melihat data, filter maupun melakukan edit dari satu row data.  Secara teknik, data tabel adalah sebuah perulangan tampilan dari array yang diambil dari database. Directive ng-repeat bisa digunakan untuk membuat tabel secara mudah. Contoh penggunaan ng-repeat seperti di bawah ini :

 

HTML DOM

DOM (Document Object Model) adalah bahasa cross-platform yang berinteraksi dengan objek-objek di HTML, XHTML, ataupun dokumen XML. Setiap bagian dokumen diorganisir dalam struktur pohon/tree, biasanya disebut sebagai DOM tree.

Directive di bawah ini digunakan untuk mengikat data aplikasi pada elemen DOM.

Nama Fungsi
ng-disabled kontrol untuk disabled
ng-show kontrol untuk menampilkan
ng-hide kontrol untuk menyembunyikan
ng-click event untuk click dalam AngularJS
  • Directive ng-disabled : Menambahkan atribut ng-disabled pada sebuah tombol, maka fungsinya akan sama dengan atribut disabled pada elemen lainnya.
  • Directive ng-show : Menambahkan atribut ng-show, sama artinya dengan mengaktifkan css display:initial pada sebuah elemen.
  • Directive ng-hide : Menambahkan atribut ng-show, sama artinya dengan mengaktifkan css display:none pada sebuah elemen.
  • Directive ng-click : Jika Anda telah terbiasa menggunakan atribut onClick, maka directive ini akan mirip fungsinya dengan onClick.

Contoh kode seperti di bawah ini dengan kombinasi penggunaan elemen.

Selamat mencoba 🙂

 

Artikel lainnya mengenai AngularJS silakan klik di sini, tutorial AngularJS