[AngularJS] 조건 데이터 표현을 위한 템플릿 (ng-switch, ng-if)

조건 데이터 표현을 위한 템플릿

ng-switch : 어떠한 html태그에서도 사용할 수 있으며, 부모 요소에서 ng-switch="표현식"을 작성. (표현식에 $scope의 속성명이 오게 된다.)

자식 요소에서 ng-switch-when="조건일치값" 을 작성한다.

<div ng-switch="표현식">
    <div ng-switch-when="조건일치값 1"></div>
    <div ng-switch-when="조건일치값 2"></div>
    <div ng-switch-default></div>
</div>

ng-switch를 사용한 조건에 따라 div의 색이 변경되는 예제

<style type="text/css">
    .box{width:100px; height:100px;}
    .red{background-color: red;}
    .blue{background-color: blue;}
    .black{background-color: black;}
</style>
<div>
    <input type="radio" ng-model="color" value="red"> red <br/>
    <input type="radio" ng-model="color" value="blue"> blue <br/>

    <div ng-switch="color">
        <div ng-switch-when="red" class="box red"></div>
        <div ng-switch-when="blue" class="box blue"></div>
        <div ng-switch-default class="box black"></div>
    </div>
</div>

ng-show, ng-hide : 적용 요소를 css의 display 속성변경으로 보여주거나 숨김

<div ng-show="표현식"></div>
<div ng-hide="표현식"></div>

ng-if : 요소 자체를 없애거나 생성하는것. ($scope 또한 없어지고 생성된다.)

<div ng-if="표현식"></div>

ng-if를 사용한 checkbox 에 체크시 버튼이 보여지는 예제

<div>
    <input type="checkbox" ng-model="checked" ng-init="checked=false" />
    <button type="button" ng-if="checked">show button</button>
</div>