-
[AngularJS] 10. HTML Event - Angular JS 강좌Web/AngularJS 2015. 6. 12. 14:21
AngularJS Events
AngularJS는 자신만의 HTML 이벤트 지시어를 가지고 있습니다.1. The ng-click Directiveng-click 지시어는 AngularJS 클릭 이벤트를 선언합니다.1234567891011121314151617181920212223<!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 a92. Hiding HTML Elementsng-hide 지시어는 어플리케이션의 일부분의 가시성을 설정할 때 사용합니다.ng-hide="true" 값은 HTML 요소를 보이지 않게 합니다.ng-hide="false"값은 요소를 보이게 합니다.12345678910111213141516171819202122232425<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 Elementsng-show는 어플리케이션의 일부분의 가시성을 설정하는데 사용합니다.ng-show="false"값은 HTML 요소를 보이지 않게 합니다.ng-show="true"값은 HTMl 요소를 보이게 합니다.12345678910111213141516171819202122232425262728293031323334<!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 를 참고하여 작성하였습니다.'Web > AngularJS' 카테고리의 다른 글
[AngularJS] 13. 검사(Validations) - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 12. 서식(Forms) - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 11. 모듈(module) - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 9. HTML DOM - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 8. SQL - Angular JS 강좌 (0) 2015.06.12 [AngularJS] 7. Table - Angular JS 강좌 (0) 2015.06.12
