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

Posted
Filed under jQuery

ng-bind 는 angular 의 변수 또는 model 과 연결되는 M-V 의 연결역할을 하는 Directive 이다. 또는, 인터폴레션으로 {{ }} 작성해도 같은 효과를 본다. 근데 공부를 하다보니 , 네임설정에 있어. period 가 들어간 네임이 작동하거나 , 안하는 경우가 있어, 정리해 두기로 했다.

# ng-bind 네임설정  #1  "일반적인 영문 / 영+숫자" 
<body ng-app="myApp">
        <div ng-controller="myCtrl">
            <div>name : <span ng-bind="name"></span></div>            
            <div>name : <span ng-bind="name12"></span></div>            
        </div>
          
        <script type="text/javascript">
                var m = angular.module("myApp" , []);    
                m.controller("myCtrl" , function($scope)
                {                    
                    $scope.name = "pluginn";     // 정상 작동
                    $scope.name12 = "pluginn12"  // 정상 작동
                });
        </script>
</body>
단,네임설정에있어, 숫자만으로 이루어진 명칭 또는 영문+숫자 혼용이 아닌 숫자+영문 인 경우 , 프로그램의 기초와 같은 개념을 갖고있어, 작동되지 않는다. (예, 1111,2342 , 11name  ,11price  모두 오류)


# ng-bind 네임설정  #2   "period 를 붙인 네임 name.nickname "
<body ng-app="myApp">
        <div ng-controller="myCtrl">      
            <div>name.nickname : <span ng-bind="name.nickname"></span></div>            
        </div>
          
        <script type="text/javascript">
                var m = angular.module("myApp" , []);    
                m.controller("myCtrl" , function($scope)
                {                    
                    $scope.name.nickname = "plug~ plug~"; // 오류발생 작동하지 않음
                });
        </script>
</body>
으잉 안된다 이상하네, 아래를 보자.

# ng-bind 네임설정  #3   "period 를 붙인 네임 name.nickname "  by ng-model
<body ng-app="myApp">
        <div ng-controller="myCtrl">      
           <input  type="text" ng-model="name.nickname"/>
            <div>name.nickname:<span ng-bind="name.nickname"></span></div><!-- 정상작동 -->
            <div>{{name.nickname}}</div> <!-- 정상작동(인터폴레이션)-->
        </div>
          
        <script type="text/javascript">
                var m = angular.module("myApp" , []);    
                m.controller("myCtrl" , function($scope)
                {                    
                   //  angluar 가 제어할수있도록, 컨트롤 등록만 해준다
                });
        </script>
</body>
음, ng-model 로 설정된 이름이는 객체처럼 접근이되는 네임이 가능하다. 그럼 예제를 하나더 들어보자


# ng-bind 네임설정  #3   "period 를 붙인 네임 name.nickname "  by Array
<body ng-app="myApp">
        <div ng-controller="myCtrl">     
            <div>name.nickname:<span ng-bind="name.nickname"></span></div> <!-- 정상작동-->
            <div>{{name.nickname}}</div> <!-- 정상작동(인터폴레이션)-->
        </div>
        <script type="text/javascript">
                var m = angular.module("myApp" , []); 

                m.controller("myCtrl" , function($scope)
                { 
                          var name = { nickname : "pluginn" };
                          $scope.name = name;               
                });
        </script>
</body>
작동된다. 결국 period(.) 의 의미는 프로그래밍에서와 마찬가지로 객체의 속성접근으로 봐야한다.
네임에는 . 를 사용하지 말자 , 

ng-Model (예, ng-model="name.first") 또는 배열과같은 객체명의 속성 성격의 period 네이밍은 가능하나, 변수명  자체로서의 period 사용은 자제하기로 하자. 일반적인 프로그래밍에서이 사용방법과 딱히 다를것이
없다.
2018/04/05 13:21 2018/04/05 13:21
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
Posted
Filed under Screen


70주년이 되어서야 이렇게 공중파로 인지도 높은 강사의 입에서 전파가 되었습니다.

필자 역시도 당시 생존자 증언을 그대로 들었습니다. 그 당시 현장에서는 말로 표현할수 없는 정말 믿기지 않는 상황이였기에 더더욱 죽일새끼들은 숨겨야 했었는지도 모릅니다.
히틀러도 비교가 안되는 이승만 글로벌 개새끼가 대한민국에 존재했던거 자체가 국가의 재앙이였던겁니다.
2018/04/04 12:07 2018/04/04 12:07