- ng-show는 bool 값으로 data visibility 속성을 컨트롤한다.
- ng-class 는 css의 클래스를 선택한다.
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<html ng-app='fruitApp'>
<head>
<!-- 한글 설정 -->
<meta charset="utf8">
<title>angularjs test</title>
<style type='text/css' rel='stylesheet'>
.BGred{
background-color: blue;
}
.BGblue{
background-color: red;
}
.FGwhite{
color: orange;
}
</style>
</head>
<body>
<div ng-controller='DeathrayMenuController'>
<!-- ng-click 버튼을 누르면, toggleMenu 함수가 호출된다.-->
<button ng-click='toggleMenu()'>메뉴 On/Off </Button>
<!-- ng-show showMenu의 boolean 값에 따라 visibility를 결정한다.-->
<ul ng-show='showMenu'>
<!-- ng-class는 css와 연결된 값이다 -->
<!-- {css 클래스 : boolean 값 } -->
<!-- 아래는 BGred가 css의 클래스고, isBGRed는 boolean 값이다 -->
<li ng-class='{BGred:isBGRed}' ng-click='stun()'>기절시키기</li>
<!-- 여러 css 클래스를 설정할 수 있다. -->
<li ng-class='{BGblue:isBGBlue, FGwhite: isFGWhite}' ng-click='erase()'>지우기</li>
</ul>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js'></script>
<script type='text/javascript'>
var app = angular.module('fruitApp',[]);
function __DeathrayMenuController($scope){
$scope.showMenu = false;
$scope.isBGRed = false;
$scope.isBGBlue = false;
$scope.isFGWhite = false;
$scope.toggleMenu = function(){
$scope.showMenu = !$scope.showMenu;
}
$scope.stun = function(){
$scope.isBGRed = !$scope.isBGRed;
}
$scope.erase = function(){
$scope.isBGBlue = !$scope.isBGBlue;
$scope.isFGWhite = !$scope.isFGWhite;
}
}
app.controller('DeathrayMenuController',__DeathrayMenuController);
</script>
</body>
</html>
| cs |
- 기절시키기
- 지우기
댓글 없음:
댓글 쓰기