[AngularJS] 조건문 4종류. ng-if,else,switch,ng-class등등!!

AngularJS의 조건문에 대해서 살펴봅시다.

1. ng-switch

2. ng-hide, ng-show

3. ng-class

4. ng-if

넷 다 자주 사용되는 문법이니.. 하나만 사용하시기 보단 상황에 맞춰서 쓰시면 되겠습니다.

1-1. ng-switch

<div ng-switch on="fruits"> <div ng-switch-when="apple"> <!-- fruits값이 apple일 때 해당 태그가 실행됩니다.--> </div> <div ng-switch-default> <!-- code to render the regular video block --> </div> </div>

on에 switch의 대상이 되는 변수를 적어주시고.

case대신 when이라고 적어주면 일반 switch-case문과 흡사하네요!

ng-switch 예제

입력한 값 : {{shAngVar}}

apple을 입력하셨군요.

아무것도 입력하지 않으셨군요

ng-switch 예제 소스

2. ng-hide / ng-show

<div ng-hide="isBlockedMember"> <!-- isBlockedMember가 true값을 가지면 해당 <div>태그는 보이지 않습니다.--> </div> <div ng-show="isLogged"> <!-- isLogged가 true값을 가지면 해당 <div>가 보이게 됩니다. --> </div>

특정 조건에 있어서 show/hide를 할 수 있는 directive입니다.

저는 ng-repeat과 같이 자주 쓰는 편입니다.

ng-hide / ng-show 예제

isBlockedMember : YES NO

isBlockedMember : {{isBlockedMember}}

만나서 반갑습니다. 회원님.

정지먹은 회원입니다 ㅎㅎ

ng-hide / ng-show 예제 소스

3-1. ng-class

<div ng-class="{block-member: member.isBlocked}"> <!-- member객체의 isBlocked의 값이 true이면 해당 태그에 block-member클래스가 등록됩니다. --> </div>

css와 함께 태그를 컨트롤하기에 편리합니다.

ng-class 예제

change Background color :

ng-class 예제 소스

4. ng-if

<div ng-if="lastLogged == today"> <!-- 변수의 값이 today와 일치할 때 이 태그가 보여지게 됩니다.--> </div> <div ng-if="lastLogged != today"> <!-- 변수의 값이 today와 일치하지 않을 때 이 태그가 보여지게 됩니다. --> </div>

ng-if문에는 else문이 제공되지 않습니다. ng-else란건 존재하지 않아요!

따라서 if, else if, else 보다는 switch를 쓰는게 좋습니다.

요거는 ng-show/ng-hide 랑 예제가 거의 비슷하므로 하지않을게요!