AngularJS ng-switch 지시

정의 및 사용법

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 요소가 지원됩니다.

파라미터