Instruksi ng-switch AngularJS

Pengertian dan Penggunaan

ng-switch Instruksi memungkinkan anda untuk menyembunyikan/menunjukkan elemen HTML berdasarkan ekspresi.

Jika anak elemen melalui ng-switch-when Instruksi mendapatkan padanan, maka akan ditunjukkan dengan ng-switch-when anak elemen instruksi, jika tidak akan dipadamkan elemen itu serta anak-elemennya.

Anda juga boleh menggunakan ng-switch-default Instruksi mendefinisi bahagian default untuk ditunjukkan jika sebarang bahagian lain tidak padan.

Contoh

Hanya akan menunjukkan sebahagian HTML jika ia padan dengan nilai khusus:

<div ng-switch="myVar">
  <div ng-switch-when="dogs">
    <h1>Anjing</h1>
    <p>Selamat datang ke dunia anjing.</p>
  </div>
  <div ng-switch-when="tuts">
    <h1>Panduan</h1>
    <p>Belajar daripada contoh.</p>
  </div>
  <div ng-switch-when="cars">
    <h1>Kereta</h1>
    <p>Baca tentang kereta.</p>
  </div>
  <div ng-switch-default>
    <h1>Switch</h1>
    <p>Pilih tajuk dari dropdown, untuk menukar kandungan DIV ini.</p>
  </div>
</div>

Cuba sendiri

Syarat

<element ng-switch="expression">
  <element ng-switch-when="value"></element>
  <element ng-switch-when="value"></element>
  <element ng-switch-when="value"></element>
  <element ng-switch-default></element>
</element>

Semua elemen HTML mendukung.

Parameter

Parameter Penerangan
expression Ekspresi, akan menghapus elemen yang tiada padanan dan menunjukkan elemen yang ada padanan.