คำสั่ง ng-switch ของ AngularJS

การกำหนดและการใช้งาน

ng-switch คำสั่งอนุญาตให้คุณซ่อน/แสดงองค์ประกอบ HTML ตามเอกสาร

หากประกอบของลูกผ่าน ng-switch-when คำสั่งหากมีการตรวจสอบค่าที่ตรงกันแล้วจะแสดงของที่มี ng-switch-when ประกอบของคำสั่งหรือจะถูกลบออกมาพร้อมกับประกอบของเดี่ยวกับประกอบของลูกของมัน

คุณยังสามารถใช้ ng-switch-default คำสั่งนำไประบุส่วนปกติเพื่อการแสดงเมื่อส่วนอื่นๆ ไม่มีการตรวจสอบค่า

ตัวอย่าง

มีการแสดงส่วนหนึ่งของ HTML แต่เมื่อมีการตรวจสอบค่าเฉพาะตัวเดียวนั้น

<div ng-switch="myVar">
  <div ng-switch-when="dogs">
    <h1>สุนัข</h1>
    <p>ยินดีต้อนรับสู่โลกของสุนัข。</p>
  </div>
  <div ng-switch-when="tuts">
    <h1>ตัวอย่างเรียน</h1>
    <p>เรียนรู้จากตัวอย่าง。</p>
  </div>
  <div ng-switch-when="cars">
    <h1>รถยนต์</h1>
    <p>อ่านเกี่ยวกับรถยนต์</p>
  </div>
  <div ng-switch-default>
    <h1>เปลี่ยน</h1>
    <p>เลือกหัวข้อจากแปลงเลือกเพื่อเปลี่ยนเนื้อหาของ DIV นี้</p>
  </div>
</div>

ทดลองด้วยตัวเอง

การใช้งาน

<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>

ทุกองค์ประกอบ HTML สนับสนุน

ตัวแปร