06. 조건적인 데이터 표현을 위한 템플릿(조건 지시자)

1. ng-switch

 ◈ ng-switch의 사용법

 <ANY ng-switch = "표현식>

<ANY ng-switch-when="조건 일치 값1">...</ANY>

<ANY ng-switch-when="조건 일치 값2">...</ANY>

<ANY ng-switch-default>...</ANY>

 </ANY>

 - ng-switch 문은 어떠한 HTML 태그에서도 사용할 수 있으며 부모 요소와 자식 요소가 필요하다.

*참고 

<any ng-switch="표현식">을 <any ng-switch on="표현식">으로 사용할 수 있다. 

on 속성이 특정 족건에서라는 표현이기 때문에 구문상 더 맞을 수도 있다.

2. ng-if

 ◈ ng-if의 사용법

 <ANY ng-if = "표현식">

...

 </ANY>

 - ng-if는 표현식 결과값의 참/거짓 여부에 따라 해당 요소를 없애거나 생성하는 지시자다.

 참고로 요소 자체가 없어지거나 생성될 때 scope 또한 없어지고 생성된다.

3. ng-show & ng-hide

 ◈ ng-show & ng-hide의 사용법

 <ANY ng-show="표현식">

...

 </ANY>

 <ANY ng-hide="표현식>

...

 </ANY>

 - ng-show와 ng-hide 지시자는 ng-if지시자와 마찬가지로 표현식 결과값(참/거짓)에 따라 해당 요소를 화면에 보여주거나 숨긴다.

ng-show 지시자는 참일 때 요소를 보이게 하고 거짓일 때 숨기며, ng-hide 지시자는 반대로 참일 때 숨기고 거짓일 때 보이게 한다.

실제로 요소자체는 그대로이지만 CSS의 display 속성의 값이 참일 때 block 이 되고, 거짓일 때 none이 된다.