제2의 비엔지니어 인생관을 꿈꾸며

Posted
Filed under jQuery
# ng-if
 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 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 type="text/javascript">

                var myApp = angular.module('myApp', []);
        </script>
</body>


# ng-show , ng-hide
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-hide="sbtxt=='red' ">  빨강색 X</div>  <!-- 참이면 숨김 -->
          
        </div>
       <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 = "{클래스명 : 조건 , 클래스명 : 조건 , 클래스명 : 조건.......}"
<style type="text/css">
    .red {color:#F00}
    .green {color:#0F0}
    .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 type="text/javascript">
                var myApp = angular.module('myApp', []);
        </script>
</body>
2018/04/04 14:03 2018/04/04 14:03