AngularJS[4] - DOM 제어, 이벤트처리, 입력 요소

Dana's Log·2022년 6월 15일
0

DOM 제어

ng-disabled : 해당 태그 사용 가능 여부를 설정
ng-show : 노출 여부를 설정 (true : 보여줌)
ng-hide : 노출 여부를 설정 (true : 숨김)

<script>
	var app = angular.module("test_app",[])
	
	app.controller("controller1",function($scope){
		
		$scope.showAlert = function(){
			alert("버튼을 눌렀습니다.")
		}
	});
</script>

<div ng-app="test_app" ng-controller="controller1">
													<!-- true : 버튼 비활성화  -->
	<button type="button" ng-click="showAlert()" ng-disabled="btnDisabled">버튼</button>
	<br />		<!-- 체크 시 true -->
	<input type="checkbox" ng-model="btnDisabled"/>버튼 활성화/비활성화
	<hr />
	<input type="checkbox" ng-model="show"/>p태그 show/hide
	<p ng-show="show">ng-show : 문자열이 보일까요?</p>
	<hr />
	<input type="checkbox" ng-model="hide "/>p태그 show/hide
	<p ng-hide="hide">ng-hide : 문자열이 보일까요?</p>
</div>

🎈결과

이벤트 처리

ng-mouseenter : 태그 안으로 마우스 커서가 들어왔을 경우
ng-mouseleave : 태그 안으로 들어온 마우스 커서가 나갔을 경우
ng-mousemove : 태그 내에서 마우스 커서를 움직였을 경우
ng-mousedown : 마우스 키를 눌렀을 경우
ng-mouseup : 마우스 키를 떼었을 경우
ng-click : 마우스를 클릭하였을 경우
ng-dblclick : 마우스를 더블클릭하였을 경우
ng-focus : input 태그에 포커스 주어졌을 경우
ng-blur : input 태그의 포커스가 해제되었을 경우
ng-change : input 태그의 입력 값이 변경되었을 경우
ng-copy : 입력한 내용을 복사했을 경우
ng-cut : 입력한 내용을 잘라내었을 경우
ng-paste : 복사한 내용을 붙혀넣기 했을 경우
ng-keydown : 키보드의 키를 눌렀을 경우
ng-keyup : 키보드의 키를 떼었을 경우
ng-keypress : 키보드의 키를 입력한 경우

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<title>Insert title here</title>
<script>
	var app = angular.module("test_app",[])
	
	app.controller("controller1",function($scope){
		
		var a1 = 0;
		var a2 = 0;
		var a3 = 0;
		
		$scope.enter = function(){
			$scope.box1 = a1++
			$scope.box0 = "마우스가 들어갔습니다."
		}
		$scope.leave = function(){
			$scope.box0 = "마우스가 나갔습니다."
		}
		$scope.over = function(){
			$scope.box2 = a2++;
		}
		$scope.out = function(){
			$scope.box2 = "마우스가 나갔습니다."
		}
		$scope.move = function(){
			$scope.box3 = a3++;
		}
		$scope.down = function(){
			$scope.box4 = "마우스를 눌렀습니다."
		}
		$scope.up = function(){
			$scope.box4 = "마우스를 떼었습니다."
		}
		$scope.click = function(){
			$scope.box5 = "마우스를 클릭하였습니다."
		}
		$scope.dblclick = function(){
			$scope.box5 = "마우스를 더블클릭하였습니다."
		}
		$scope.focus = function(){
			$scope.box6 = "포커스가 주어졌습니다."
		}
		$scope.blur = function(){
			$scope.box6 = "포커스를 잃었습니다."
		}
		$scope.change = function(){
			$scope.box6 = "입력된 값이 변경되었습니다 : " + $scope.input1
		}
		$scope.copy = function(){
			$scope.box7 = "복사되었습니다"
		}
		$scope.cut = function(){
			$scope.box7 = "잘라내었습니다."
		}
		$scope.paste = function(){
			$scope.box7 = "붙여넣었습니다."
		}
		$scope.keydown = function(){
			$scope.box8 = "keydown"
		}
		$scope.keyup = function(){
			$scope.box8 = "keyup"
		}
		$scope.keypress = function(){
			$scope.box9 = "keypress"
		}
	});
</script>
<style>
	.box {
		width:200px;
		height:200px;
		border:1px solid black;
	}
	.box2 {
		width:50%;
		height:50%;
		border:1px solid black;
		margin:25%;
	}
</style>
</head>
<body>


<div ng-app="test_app" ng-controller="controller1">
	<!-- enter : 선언된 태그 외엔 이벤트 전달 안됨 -->
	<div class="box" ng-mouseenter="enter()" ng-mouseleave="leave()">
		<div class="box2"></div>
	</div>
	<p>box0 : {{box0}}</p>
	<p>box1 : {{box1}}</p>
	<!-- over : 선언된 태그 안에 있는 태그에도 이벤트 전달됨 -->
	<div class="box" ng-mouseover="over()" ng-mouseout="out()">
		<div class="box2"></div>
	</div>
	<p>box2 : {{box2}}</p>
	<hr />
	<div class="box" ng-mousemove="move()"></div>
	<p>box3 : {{box3}}</p>
	<hr />
	<div class="box" ng-mousedown="down()" ng-mouseup="up()"></div>
	<p>box4 : {{box4}}</p>
	<hr />
	<div class="box" ng-click="click()" ng-dblclick="dblclick()"></div>
	<p>box5 : {{box5}}</p>
	<hr />
	<input type="text" ng-model="input1" ng-focus="focus()" ng-blur="blur()" ng-change="change()" ng-copy="copy()" ng-cut="cut()" ng-paste="paste()"/>
	<p>box6 : {{box6}}</p>
	<p>box7 : {{box7}}</p>
	<hr />
	<input type="text" ng-model="input2" ng-keydown="keydown()" ng-keyup="keyup()" ng-keypress="keypress()" />
	<p>box8 : {{box8}}</p>
	<p>box9 : {{box9}}</p>
</div>
</body>
</html>

입력 요소

  • 입력 요소 초기값 설정
  • 입력 요소의 값 바로 출력
  • 입력 요소에 설정된 값을 필요할 때 가져오는 방법
<script>
	var app = angular.module("test_app",[])
	
	app.controller("controller1",function($scope){
		$scope.input1 = "초기값"
		$scope.c1 = true
		$scope.c3 = true
		
		$scope.r1 = "radio2"
		$scope.s1 = "select2"
		
		$scope.getData = function(){
			$scope.result1 = $scope.input1
			
			$scope.result2 = $scope.c1
			$scope.result3 = $scope.c2
			$scope.result4 = $scope.c3
			
			$scope.result5 = $scope.r1
			
			$scope.result6 = $scope.s1
		}
		
		
	});
</script>

<div ng-app="test_app" ng-controller="controller1">
	<input type="text" ng-model="input1" />
	<br />
	<input type="checkbox" ng-model="c1"/>체크박스1<br>
	<input type="checkbox" ng-model="c2"/>체크박스2<br>
	<input type="checkbox" ng-model="c3"/>체크박스3<br>
	
	<input type="radio" ng-model="r1" value="radio1" />라디오1 <br />
	<input type="radio" ng-model="r1" value="radio2" />라디오2 <br />
	<input type="radio" ng-model="r1" value="radio3" />라디오3 <br />
	
	<select ng-model="s1">
		<option value="select1">항목1</option>
		<option value="select2">항목2</option>
		<option value="select3">항목3</option>
	</select>
	<br />
	
	<button type="button" ng-click="getData()">input 데이터 가져오기</button>
	<hr />
	<p>input1 : {{input1}}</p>
	<p>c1 : {{c1}}</p>
	<p>c2 : {{c2}}</p>
	<p>c3 : {{c3}}</p>
	<div ng-switch="c1">
		<div ng-switch-when="true">
			<p>체크박스1이 선택됨</p>
		</div>
		<div ng-switch-when="false">
			<p>체크박스1이 선택 해제됨</p>
		</div>
	</div>
	<p>r1 : {{r1}}</p>
	<div ng-switch="r1">
		<div ng-switch-when="radio1">
			<p>라디오1이 선택됨</p>
		</div>
		<div ng-switch-when="radio2">
			<p>라디오2이 선택됨</p>
		</div>
		<div ng-switch-when="radio3">
			<p>라디오3이 선택됨</p>
		</div>
	</div>
	<p>s1 : {{s1}}</p>
	<div ng-switch="s1">
		<div ng-switch-when="select1">
			<p>항목1이 선택됨</p>
		</div>
		<div ng-switch-when="select2">
			<p>항목2이 선택됨</p>
		</div>
		<div ng-switch-when="select3">
			<p>항목3이 선택됨</p>
		</div>
	</div>
	<hr />
	<p>input1 : {{result1}}</p>
	<p>check1 : {{result2}}</p>
	<p>check2 : {{result3}}</p>
	<p>check3 : {{result4}}</p>
	<p>radio : {{result5}}</p>
	<p>select : {{result6}}</p>
</div>

🎈결과

profile
다나로그

0개의 댓글