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>