Instruksi ng-switch AngularJS

Definisi dan penggunaan

ng-switch Instruksi memungkinkan Anda untuk menyembunyikan/menampilkan elemen HTML berdasarkan ekspresi.

Jika elemen anak melalui ng-switch-when Jika instruksi mendapatkan cocokan, maka akan ditampilkan yang memiliki ng-switch-when elemen anak dari instruksi, sebaliknya elemen dan anaknya akan dihapus.

Anda juga dapat menggunakan ng-switch-default Instruksi mendefinisikan bagian default, untuk ditampilkan saat bagian lainnya tidak cocok.

Contoh

Hanya saat ia cocok dengan nilai khusus, bagian HTML sebagian akan ditampilkan:

<div ng-switch="myVar">
  <div ng-switch-when="dogs">
    <h1>Anjing</h1>
    <p> Selamat datang di dunia anjing.</p>
  </div>
  <div ng-switch-when="tuts">
    <h1>Panduan</h1>
    <p>Belajar dari contoh.</p>
  </div>
  <div ng-switch-when="cars">
    <h1>Mobil</h1>
    <p>Baca tentang mobil.</p>
  </div>
  <div ng-switch-default>
    <h1>Switch</h1>
    <p>Pilih topik dari daftar turun, untuk berubah konten DIV ini.</p>
  </div>
</div>

Coba sendiri

Sintaks

<elemen ng-switch="ekspresi">
  <elemen ng-switch-when="value"></elemen>
  <elemen ng-switch-when="value"></elemen>
  <elemen ng-switch-when="value"></elemen>
  <elemen ng-switch-default></elemen>
</elemen>

Semua elemen HTML mendukung.

Parameter

Parameter Deskripsi
ekspresi Ekspresi, akan menghapus elemen yang tidak memiliki cocokan dan menampilkan elemen yang memiliki cocokan.