336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

 

이번에는 클릭할때마다 일부가 보였다가 안보였다가 하는 소스코드를 해볼까합니다.

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
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<!-- angularJS를 불러옵니다. -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
 
<!-- app이름과 controller이름입니다. -->
<div ng-app="myApp" ng-controller="myCtrl">
 
<!-- 클릭시에 잘동하는 myFunc함수 -->
<button ng-click="myFunc()">버튼클릭</button>
 
<div ng-show="showMe">
    <h1>Menu:</h1>
    <div>Java</div>
    <div>C</div>
    <div>C++</div>
</div>
 
</div>
<script>
/* 해당 앱을 활성화합니다. */
var app = angular.module('myApp', []);
/*정의한 앱에 controller를 실행합니다.*/
app.controller('myCtrl', function($scope) {
    /* showMe를 안보이게 합니다. */
    $scope.showMe = false;
    /* myFunc함수구편 */
    $scope.myFunc = function() {
        /* showMe에 반대를 넣어줍니다. ex) 안보이면 보이게, 보이면 안보이게 처리합니다. */
        $scope.showMe = !$scope.showMe;
    }
});
</script>
 
</body>
</html>
 
 cs

주석에 설명이 다 붙어있어서 다른 설명은 생략하겠습니다.

 

감사합니다.

 

 

'ANGULARJS > event' 카테고리의 다른 글

angularJS event 목록 줄줄이 있어용  (0) 2016.06.27
angularJS 모르면 섭섭한 Event 중 하나 click  (0) 2016.06.27
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

event중에 click이벤트를 알아볼께요.

 

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
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<!-- angularJS를 불러옵니다. -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
 
<!-- app이름과 controller이름입니다. -->
<div ng-app="myApp" ng-controller="myCtrl">
    <!-- 클릭하면 해당 함수를 실행합니다. 참고로 h1범위에서 클릭이면 다 changeText함수를 실행합니다. -->
    <h1 ng-click="changeText()">{{firstname}}</h1>
</div>
 
<script>
/* 해당 앱을 활성화합니다. */
var app = angular.module('myApp', []);
/*정의한 앱에 controller를 실행합니다.*/
app.controller('myCtrl', function($scope) {
    /* $scope.변수로 값을 넣어줍니다. */
    $scope.firstname = "JDK";
    /* changeText 함수를 만들어둡니다. */
    $scope.changeText = function() {
        /* firstname의 값을 치환합니다. */
        $scope.firstname = "BLOG";
    }
});
</script>
JDK를 클릭하면 값이 바뀌어요.
 
</body>
</html>
 
 cs

결과에서 JDK만 있는 줄을 클릭하면 BLOG로 바뀝니다.

 

공통적으로 app이름과 controller이름을 만들고, 안에 함수를 하나 만들고, 태그에 click함수로 해당함수를 연결했습니다.

이와같이 event로 연결가능한 명령어가 여럿있습니다.

 

다음글에선 다른 event를 다뤄보겠습니다.

 

감사합니다.

 

 

'ANGULARJS > event' 카테고리의 다른 글

angularJS event 목록 줄줄이 있어용  (0) 2016.06.27
angularJS click을 이용한 show(보였다가 안보였다가)  (0) 2016.06.27
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

안녕하세요.

 

이번엔 angularJS로 Array를 만들어서 출력해볼께요.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<!-- angularJS를 불러옵니다. -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
 
<!-- 배열을 순서대로 넣었습니다. 이 배열은 0부터 위치가 시작됩니다. -->
<div ng-app="" ng-init="points=['java','script','angular','framework','!']">
 
<!-- points의 4번째, framework를 출력합니다. -->
<p>출력된 {{ points[3] }}</p>
 
<!-- points의 1번째, java를 출력합니다. -->
<p>출력된 <span ng-bind="points[0]"></span></p>
 
</div>
 
</body>
</html>
 cs

결과는

출력된 framework

출력된 java

 

감사합니다.

 

'ANGULARJS > expression' 카테고리의 다른 글

angularJS Expression 어딘가에 소속된 값들의 모임  (0) 2016.06.27
angularJS Expression 변수끼리도 한번?!  (0) 2016.06.27
angularJS 변수선언없이 계산사는 expression  (0) 2016.06.27

+ Recent posts

티스토리툴바