# ng-if
ng-if 구문안의 조건이 맞으면 본인을 show 틀리면 hide
ng-if 구문안의 조건이 맞으면 본인을 show 틀리면 hide
<body ng-app="myApp">
<input type="text" ng-model="sbtxt" value="">
<div ng-if="sbtxt == 'red' ">빨강색</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
</script>
</body>
# ng-switch on ~ ng-switch-when 문
ng-switch on 에 연결된 ng-model 의 value 에 따라 ng-switch-when 조건에 설정된
블럭들이 show/hide 됨 , 아래 예제
<body ng-app="myApp">
<select id="sb" ng-model="sbcolor">
<option value="">선택</option>
<option value="1">red</option>
<option value="2">green</option>
<option value="3">blue</option>
</select>
<div ng-switch id="aa" on="sbcolor">
<div ng-switch-when="1" class="box red"></div>
<div ng-switch-when="2" class="box green"></div>
<div ng-switch-when="3" class="box blue"></div>
<div ng-switch-default class="box black"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
</script>
</body>
# ng-show , ng-hide
ng-show 구문 안의 조건이 맞으면 자신을 show 틀리면 hide 한다.
ng-hide 구문안의 조건이 맞으면 자신을 hide 하고 틀리면 show 한다.
ng-show 구문 안의 조건이 맞으면 자신을 show 틀리면 hide 한다.
ng-hide 구문안의 조건이 맞으면 자신을 hide 하고 틀리면 show 한다.
<body ng-app="myApp">
<input type="text" ng-model="sbtxt" value="">
<div ng-show="sbtxt=='red' ">빨강색 O</div> <!-- 참이면 보임 -->
<div ng-show="sbtxt=='red' ">빨강색 O</div> <!-- 참이면 보임 -->
<div ng-hide="sbtxt=='red' "> 빨강색 X</div> <!-- 참이면 숨김 -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
</script>
</body>
# ng-class
ng-class 구문안에 조건에 만족하면 선언한 클래스가 블럭에 적용된다.
ng-class 구문안에 조건에 만족하면 선언한 클래스가 블럭에 적용된다.
ng-class = "{클래스명 : 조건 , 클래스명 : 조건 , 클래스명 : 조건.......}"
<style type="text/css">
.red {color:#F00}
.red {color:#F00}
.green {color:#0F0}
.blue {color:#00F}
</style>
<body ng-app="myApp">
<input type="text" ng-model="sbtxt" value="">
.blue {color:#00F}
</style>
<body ng-app="myApp">
<input type="text" ng-model="sbtxt" value="">
<div ng-class="{red : sbtxt == 'red' , blue : sbtxt == 'blue' }">안녕하세요</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
</script>
</body>
