Menggunakan Directive ng-switch AngularJs untuk memilih data pada form

Pada pembahasan materi kali ini kita akan mempelajari directive ng-switch pada AnggularJs.Ng-switch berfungsi untuk menampilkan data sesuai dengan kriteria yang telah ditentukan.Okay untuk mempermudah memahami direcrive ng-switch kita langsung mengimplementasikan pada form berikut :
alt

Berikut source code lengkapnya :

 <!DOCTYPE html>
<html>  
  <script src="angular.min.js"></script>
  <body ng-app="">
      <table border="1px" align="center">
        <tr>
          <td align="center"><b>Bimbingan Belajar di Era Belajar<b></td>
        </tr>
        <td colspan="1">-------------------------------------------------</td>
        <tr>
          <td>
              <form>
                Pilih Jenjang Pendidikan
                <select ng-model="myVar">
                  <option value="">
                  <option value="SD">SD
                  <option value="SMP">SMP
                  <option value="SMA">SMA
                  <option value="Umum">Umum
                </select>
              </form>
          </td>
        </tr> 
        <tr>
          <td>
            <div ng-switch="myVar">
              <div ng-switch-when="SD">
                 <h3>Tingkat SD</h3>
                 <p>Matematika</p>
                 <p>IPA Terpadu</p>
                 <p>IPS Terpadu</p>
                 <p>Bahasa Inggris</p> 
              </div>
              <div ng-switch-when="SMP">
                <h3>Tingkat SMP</h3>
                  <p>Matematika</p>
                  <p>Bahasa Inggris</p>
                  <p>Bahasa Indonesia</p>
                  <p>IPA Terpadu</p>
                  <p>IPS Terpadu</p> 
              </div>
              <div ng-switch-when="SMA">
                <h3>Tingkat SMA</h3>
                  <p>Matematika</p>
                  <p>Bahasa Inggris</p>
                  <p>Bahasa Indonesia</p>
                  <p>Ekonomi</p>
                  <p>Fisika</p>
                  <p>Biologi</p>
                  <p>Akutansi</p>

              </div>
              <div ng-switch-when="Umum">
                <h3>Tingkat Umum</h3>
                  <p>Matematika Dasar</p>
                  <p>Bahasa Inggris</p>
                  <p>Bahasa Mandarin</p>
                  <p>Bahasa Jerman</p>
                  <p>Bahasa Jepang</p>
                  <p>Bahasa Arab</p>
              </div>
            </div>
          </td>
      </tr>
    </table> 
  </body>
</html>  

Penjelasan syntak, berikut digunakan untuk menampilkan data yang akan dipilih.

            <form>
                Pilih Jenjang Pendidikan
                <select ng-model="myVar">
                  <option value="">
                  <option value="SD">SD
                  <option value="SMP">SMP
                  <option value="SMA">SMA
                  <option value="Umum">Umum
                </select>
             </form>

<select ng-model="myVar"> ng-model digunakan untuk mendeklarasikan variabel pada AnggularJs.

<div ng-switch="myVar"> ng-switcth berfungsi untuk memanggil variabel yang ditentukan pada ng-model="myVar".

<div ng-switch-when="SD"> ng-switch-when berfungsi untuk memanggil variabel yang ditentukan pada <option value="SD"> dan begitu seterus pada ng-switch-when lainnya.

<div ng-switch="myVar">  
  <div ng-switch-when="SD">
     <h3>Tingkat SD</h3>
     <p>Matematika</p>
     <p>IPA Terpadu</p>
     <p>IPS Terpadu</p>
     <p>Bahasa Inggris</p> 
  </div>
  <div ng-switch-when="SMP">
    <h3>Tingkat SMP</h3>
      <p>Matematika</p>
      <p>Bahasa Inggris</p>
      <p>Bahasa Indonesia</p>
      <p>IPA Terpadu</p>
      <p>IPS Terpadu</p> 
  </div>
  <div ng-switch-when="SMA">
    <h3>Tingkat SMA</h3>
      <p>Matematika</p>
      <p>Bahasa Inggris</p>
      <p>Bahasa Indonesia</p>
      <p>Ekonomi</p>
      <p>Fisika</p>
      <p>Biologi</p>
      <p>Akutansi</p>

  </div>
  <div ng-switch-when="Umum">
    <h3>Tingkat Umum</h3>
      <p>Matematika Dasar</p>
      <p>Bahasa Inggris</p>
      <p>Bahasa Mandarin</p>
      <p>Bahasa Jerman</p>
      <p>Bahasa Jepang</p>
      <p>Bahasa Arab</p>
  </div>
</div>  

Source code menggunakan directive ng-witch bisa didownload di https://github.com/era-belajar/Directive-ng-switch

Marfi Saputra

Web Programmer di erabelajar.com (PT Ridaka Indonesia Cerdas) . Mengambil Kosentrasi Informatika Komputer di LP3I JAKARTA Kampus Depok