Lệnh ng-switch của AngularJS

Định nghĩa và cách sử dụng

ng-switch Lệnh cho phép bạn ẩn/hiển thị phần HTML dựa trên biểu thức.

Nếu phần con thông qua ng-switch-when Khi lệnh nhận được phần khớp, nó sẽ hiển thị phần có ng-switch-when thành phần con của lệnh, nếu không sẽ xóa bỏ phần đó và các phần con của nó.

Bạn cũng có thể sử dụng ng-switch-default Lệnh định nghĩa phần mặc định để hiển thị phần đó khi các phần khác đều không khớp.

Mô hình

Chỉ khi nó khớp với một giá trị cụ thể, một phần HTML nào đó mới được hiển thị:

<div ng-switch="myVar">
  <div ng-switch-when="dogs">
    <h1>Chó</h1>
    <p>Chào mừng bạn đến với thế giới của chó.</p>
  </div>
  <div ng-switch-when="tuts">
    <h1>Hướng dẫn</h1>
    <p>Học từ các ví dụ.</p>
  </div>
  <div ng-switch-when="cars">
    <h1>Xe ô tô</h1>
    <p>Đọc về xe ô tô.</p>
  </div>
  <div ng-switch-default>
    <h1>Chuyển đổi</h1>
    <p>Chọn chủ đề từ danh sách rơi để chuyển nội dung của DIV này.</p>
  </div>
</div>

Thử ngay

Cú pháp

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

Tất cả các phần tử HTML đều hỗ trợ.

Tham số

Tham số Mô tả
expression Biểu thức, sẽ xóa bỏ các phần tử không có khớp và hiển thị các phần tử có khớp.