반응형
SMALL
event 1
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Step07_event.html</title> <style> .box{ width:100px; height:100px; background-color:yellow; } </style> <script src="js/angular.min.js"></script> </head> <body ng-app> <button ng-click="msg='버튼 클릭!'" ng-focus="msg='버튼 focus!'">클릭!</button> <div class="box" ng-click="msg='div 클릭!'">클릭!</div> <input type="text" ng-focus="msg='input focus!'" ng-keydown="msg='input keydown!'" ng-keyup="msg='input keyup!'" ng-blur="msg='input 요소가 focus 를 잃었네요!'"/> <div class="box" ng-mousedown="msg='div mousedown!'" ng-mouseup="msg='div mouseup!'" ng-mousemove="" ng-mouseenter="msg='div mouseenter!'" ng-mouseleave="msg='div mouseleave!'">mouse 이벤트</div> <p>{{msg}}</p> </body> </html> | cs |
ng-click
ng-focus
ng-keydown
ng-keyup
ng-blur
ng-mousedown
ng-mouseup
ng-mousemove
ng-mouseenter
ng-mouseleave
버튼을 클릭하면 p 요소안에 msg 에 버튼 클릭이 출력
input 요소에 클릭하면 focus 적용
input 요소 클릭했다가 다른데 클릭해보면 blur 가 적용되는 것을 확인가능
마우스이벤트도 확인 가능함
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Step07_event2.html</title> <style> .box{ border: 1px solid red; width: 100px; height: 100px; } </style> <script src="js/angular.min.js"></script> </head> <body ng-app> <ul> <li><a href="">Home</a></li> <li><a href="">Game</a></li> <li><a href="">Chat</a></li> </ul> <div class="box">Home</div> <div class="box">Game</div> <div class="box">Chat</div> </body> </html> | cs |
이렇게 코딩하면 상자가 3개 생기는데
위에 링크에 탭 할때마다 해당 상자만 보이게 하고 싶어
그걸 ng-show, ng-focus, ng-blur 를 이용해서 할 수 있어
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Step07_event2.html</title> <style> .box{ border: 1px solid red; width: 100px; height: 100px; } </style> <script src="js/angular.min.js"></script> </head> <body ng-app> <ul> <li><a href="" ng-focus="isShowHome=true" ng-blur="isShowHome=false">Home</a></li> <li><a href="" ng-focus="isShowGame=true" ng-blur="isShowGame=false">Game</a></li> <li><a href="" ng-focus="isShowChat=true" ng-blur="isShowChat=false">Chat</a></li> </ul> <div class="box" ng-show="isShowHome">Home</div> <div class="box" ng-show="isShowGame">Game</div> <div class="box" ng-show="isShowChat">Chat</div> </body> </html> | cs |
input 요소에 뭔가를 입력하고 엔터를 누르면 li 요소에 추가되는 코드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html> <html ng-app="MyApp"> <head> <meta charset="UTF-8"> <title>Step07_event3.html</title> <script src="js/angular.min.js"></script> <script> angular.module("MyApp",[]) .controller("MyCtrl", function($scope){ $scope.msgs=[]; $scope.onKeyup=function($event){ //입력한 키의 코드값 var code=$event.keyCode; //엔터키를 눌렀을때 (코드값:13) if(code==13){ // input 요소에 입력한 문자열을 object 에 담아서 var obj={msg:$scope.msg}; // 배열에 추가하기 $scope.msgs.push(obj); } }; }); </script> </head> <body ng-controller="MyCtrl"> <input type="text" ng-keyup="onKeyup($event)" ng-model="msg"/> <ul> <li ng-repeat="tmp in msgs">{{tmp.msg}}</li> </ul> </body> </html> | cs |
반응형
'FrameWork > AngularJS' 카테고리의 다른 글
| AngularJS http (0) | 2017.08.29 |
|---|---|
| AngularJS switch (0) | 2017.08.29 |
| AngularJS Anmation (0) | 2017.08.28 |
| AngularJS from validation (0) | 2017.08.28 |
| Step04_showHide (0) | 2017.08.25 |
