Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

nalaolla

[AngularJS] 10. HTML Event - Angular JS 강좌 본문

AngularJS_1

[AngularJS] 10. HTML Event - Angular JS 강좌

날아올라↗↗ 2016. 6. 14. 13:26
728x90
반응형

AngularJS Events

 AngularJS는 자신만의 HTML 이벤트 지시어를 가지고 있습니다.

1. The ng-click Directive
 ng-click 지시어는 AngularJS 클릭 이벤트를 선언합니다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
 
    <div ng-app="myApp" ng-controller="myCtrl">
 
        <button ng-click="count = count + 1">Click Me!</button>
 
        <p>{{ count }}</p>
 
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
            $scope.count = 0;
        });
   </script> 
 
</body>
</html>
 
cs




 

a9





2. Hiding HTML Elements
 ng-hide 지시어는 어플리케이션의 일부분의 가시성을 설정할 때 사용합니다.

 ng-hide="true" 값은 HTML 요소를 보이지 않게 합니다.

 ng-hide="false"값은 요소를 보이게 합니다.

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
 
<div ng-app="myApp" ng-controller="personCtrl">
 
<button ng-click="toggle()">Toggle</button>
 
<p ng-hide="myVar">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</p>
 
</div>
 
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe"
    $scope.myVar = false;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    };
});
</script>
cs

 personController는 제어 장에서와 같은 함수입니다.

 어플리케이션은 기본 속성을 갖습니다: $scope.myVar = false;

 ng-hide는 myVar의 값에 따라 <p> 요소의 두 입력 필드의 가시성을 설정합니다.

 toggle() 함수는 myVar를 true와 false를 토글합니다.

 




3. Showing HTML Elements
 ng-show는 어플리케이션의 일부분의 가시성을 설정하는데 사용합니다.

 ng-show="false"값은 HTML 요소를 보이지 않게 합니다.

 ng-show="true"값은 HTMl 요소를 보이게 합니다.

 

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
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
 
    <div ng-app="myApp" ng-controller="personCtrl">
 
        <button ng-click="toggle()">Hide user</button>
 
        <p ng-show="myVar">
        First Name: <input type=text ng-model="person.firstName"><br>
        Last Name: <input type=text ng-model="person.lastName"><br><br>
        Full Name: {{person.firstName + " " + person.lastName}}
        </p>
 
    </div>
 
    <script>
        var app = angular.module('myApp', []);
        app.controller('personCtrl', function($scope) {
            $scope.person = {
                firstName: "John",
                lastName: "Doe"
            };
            $scope.myVar = true;
            $scope.toggle = function() {
                $scope.myVar = !$scope.myVar;
            };
        });
   </script> 
 
</body>
</html>
 
cs



 








* 위 강좌는 W3Schools 를 참고하여 작성하였습니다.


728x90
반응형
저작자표시

'AngularJS_1' 카테고리의 다른 글

[AngularJS] 12. 서식(Forms) - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 11. 모듈(module) - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 9. HTML DOM - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 8. SQL - Angular JS 강좌  (0) 2016.06.14
[AngularJS] 7. Table - Angular JS 강좌  (0) 2016.06.14
'AngularJS_1' Related Articles more