예제가 포함된 AngularJS ng-click, ng-show 및 ng-hide 지시문

AngularJS 이벤트

AngularJS 이벤트 웹 애플리케이션이 마우스 클릭, 키보드 입력, 마우스 호버 등과 같은 사용자 입력과 상호 작용할 수 있도록 하는 기능입니다. 특정 작업 및 작업을 수행하려면 웹 기반 애플리케이션에서 이벤트를 처리해야 합니다. 사용자가 특정 작업을 수행할 때 트리거됩니다.

웹 기반 애플리케이션을 만들 때 애플리케이션은 언젠가는 마우스 클릭, 이동, 키보드 누름, 변경 이벤트 등과 같은 DOM 이벤트를 처리해야 할 것입니다.

AngularJS와 이러한 이벤트를 처리하는 데 사용할 수 있는 기능을 추가할 수 있습니다.

예를 들어 페이지에 버튼이 있고 버튼을 클릭할 때 무언가를 처리하려는 경우 Angular ng-click 이벤트 지시문을 사용할 수 있습니다.

이 과정에서 이벤트 지시문을 자세히 살펴보겠습니다.

AngularJS의 ng-click 지시문이란 무엇입니까?

The "ng-클릭 지시어" AngularJS에서는 HTML의 요소를 클릭할 때 사용자 정의 동작을 적용하는 데 사용됩니다. 이 지시문은 일반적으로 버튼에 사용됩니다. 왜냐하면 버튼은 사용자가 수행한 클릭에 응답하는 이벤트를 추가하는 데 가장 일반적이기 때문입니다. 버튼을 클릭하면 경고를 팝업하는 데에도 사용됩니다.

AngularJS의 ng-click 구문

<element
 ng-click="expression">
</element>

클릭 이벤트를 구현하는 방법에 대한 간단한 예를 살펴보겠습니다.

AngularJS의 ng-click 예

이 ng-click 예제에서는 사용자가 버튼을 클릭할 때 값이 증가하는 카운터 변수를 갖게 됩니다.

AngularJS의 ng-click 지시어 — AngularJS에서 ng 클릭의 예

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="">

<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<button ng-click="count = count + 1" ng-init="count=0">
    Increment
</button>

<div>The Current Count is {{count}}</div>

</body>
</html>

코드 설명 :

먼저 ng-init 지시문을 사용하여 지역 변수 개수의 값을 0으로 설정합니다.
그런 다음 버튼에 ng-click 이벤트 지시문을 도입합니다. 이 지시어에서는 count 변수의 값을 1씩 증가시키는 코드를 작성하고 있습니다.
여기서는 count 변수의 값을 사용자에게 표시합니다.

코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.

출력:

위의 출력에서,

"증가" 버튼이 표시되고 count 변수의 값이 초기에는 0인 것을 볼 수 있습니다.
Increment 버튼을 클릭하면 아래 출력 이미지와 같이 카운트 값이 그에 따라 증가합니다.

AngularJS의 ng-show 지시문이란 무엇입니까?

The ng-Show 지시문 AngularJS에서는 특정 특정 항목을 표시하거나 숨기는 데 사용됩니다. HTML ng-show 속성에 제공된 표현식을 기반으로 하는 요소입니다. 백그라운드에서 .ng-hide CSS 클래스를 요소에 제거하거나 추가하여 HTML 요소를 표시하거나 숨깁니다. 표시를 없음으로 설정하는 사전 정의된 CSS 클래스입니다.

AngularJS의 ng-show 구문

<element
 ng-show="expression">
</element>

백그라운드에서 요소에 .ng-hide CSS 클래스를 제거하거나 추가하여 요소를 표시하거나 숨깁니다.

AngularJS의 ng-show 예

"ngshow event" 지시문을 사용하여 숨겨진 요소를 표시하는 방법에 대한 Angular 예제의 ng-show를 살펴보겠습니다.

AngularJS의 ng-show 지시문 — Angular의 ng show 예

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    <input type="button" value="Show Angular" ng-click="ShowHide()"/>

    <br><br><div ng-show = "IsVisible">Angular</div>
</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope){
        $scope.IsVisible = false;

        $scope.ShowHide = function(){
            $scope.IsVisible = true;
        }
        });
</script>

</body>
</html>

코드 설명 :

버튼 요소에 ng-click 이벤트 지시어를 첨부합니다. 여기에서는 컨트롤러인 DemoController에 정의된 "ShowHide"라는 함수를 참조하고 있습니다.
Angular라는 텍스트가 포함된 div 태그에 ng-show 속성을 연결합니다. 이는 ng-show 속성을 기반으로 표시/숨기기할 태그입니다.
컨트롤러에서 "IsVisible" 멤버 변수를 범위 객체에 연결합니다. 이 속성은 ng-show angular 속성(2단계)에 전달되어 div 컨트롤의 가시성을 제어합니다. 처음에는 이것을 false로 설정하여 페이지가 처음 표시될 때 div 태그가 숨겨지도록 합니다. 참고 : - ng-show 속성이 true로 설정되면, 우리의 경우 div 태그인 후속 컨트롤이 사용자에게 표시됩니다. ng-show 속성이 false로 설정되면 컨트롤이 사용자에게 숨겨집니다.
클릭 태그의 AngularJS 표시 숨기기 div가 사용자에게 표시될 수 있도록 IsVisible 멤버 변수를 true로 설정하는 코드를 ShowHide 함수에 추가하고 있습니다.

AngularJS에서 ng-show와 ng-hide에 대한 코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음과 같은 출력이 표시됩니다.

출력 : 1

출력에서,

처음에는 "AngularJS"라는 텍스트가 있는 div 태그가 표시되지 않는 것을 볼 수 있습니다. 이는 isVisible 범위 개체가 처음에 false로 설정되어 이후에 div 태그의 ng-show 지시문에 전달되기 때문입니다.
"Show AngularJS" 버튼을 클릭하면 isVisible 멤버 변수가 true로 변경되어 "Angular"라는 텍스트가 사용자에게 표시됩니다. 아래 출력이 사용자에게 표시됩니다.

이제 출력에 Angular 텍스트가 포함된 div 태그가 표시됩니다.

AngularJS의 ng-hide 지시문이란 무엇입니까?

The ng-hide 지시어 AngularJS에서는 표현식이 TRUE인 경우 요소를 숨기는 함수입니다. 표현식이 FALSE이면 요소가 표시됩니다. 백그라운드에서 요소에 .ng-hide CSS 클래스를 제거하거나 추가하여 요소를 표시하거나 숨깁니다.

AngularJS의 ng-hide 구문

<element
 ng-hide="expression">
</element>

반면에 ng-hide를 사용하면 표현식이 true이면 요소가 숨겨지고 false이면 표시됩니다.

AngularJS의 ng-hide 예

ng-hide 및 ng-show 속성을 사용할 수 있는 방법을 보여주기 위해 ngShow에 표시된 것과 유사한 ng-hide 예제를 살펴보겠습니다.

AngularJS의 ng-hide 지시문 — AngularJS의 ng-hide 예

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    <input type="button" value="Hide Angular" ng-click="ShowHide()"/>

    <br><br><div ng-hide="IsVisible">Angular</div>
</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope){
        $scope.IsVisible = false;

        $scope.ShowHide = function(){
            $scope.IsVisible = $scope.IsVisible = true;
        }
        });
</script>

</body>
</html>

코드 설명 :

버튼 요소에 ng-click 이벤트 지시어를 첨부합니다. 여기에서는 컨트롤러인 DemoController에 정의된 ShowHide라는 함수를 참조하고 있습니다.
Angular라는 텍스트가 포함된 div 태그에 ng-hide 속성을 연결합니다. 이것은 ng-show 속성을 기반으로 Angular에서 숨기기를 표시하는 데 사용할 태그입니다.
컨트롤러에서 isVisible 멤버 변수를 범위 객체에 연결합니다. 이 속성은 div 컨트롤의 가시성을 제어하기 위해 ng-show angular 속성에 전달됩니다. 처음에는 이것을 false로 설정하여 페이지가 처음 표시될 때 div 태그가 숨겨지도록 합니다.
div 태그가 사용자에게 표시될 수 있도록 IsVisible 멤버 변수를 true로 설정하는 코드를 ShowHide 함수에 추가하고 있습니다.

ng show hide 코드가 성공적으로 실행되면 브라우저에서 코드를 실행할 때 다음 출력이 표시됩니다.

출력:

출력에서,

ng-hide 지시문에 false 속성 값이 전송되었기 때문에 "AngularJs"라는 텍스트가 있는 div 태그가 처음에 표시되는 것을 볼 수 있습니다.
"Hide Angular" 버튼을 클릭하면 true 속성 값이 ng-hide 지시문으로 전송됩니다. 따라서 "Angular"라는 단어가 숨겨지는 아래 출력이 표시됩니다.

AngularJS 이벤트 리스너 지시문

다음 중 하나 이상을 사용하여 HTML 요소에 AngularJS 이벤트 리스너를 추가할 수 있습니다. ��ħ:

ng-blur
변경
ng-클릭
ng-복사
ng컷
ng-dblclick
ng-초점
ng-키다운
ng-키 누르기
ng-키업
ng-마우스다운
ng-마우스 입력
ng-mouseleave
ng-마우스 이동
ng-마우스 오버
ng-마우스업
ng-붙여 넣기

제품 개요

이벤트 지시문은 Angular에서 버튼 클릭, 키보드 및 마우스 클릭 등과 같은 사용자 개입으로 생성된 이벤트에 응답하는 사용자 정의 코드를 추가하는 데 사용됩니다.
가장 일반적인 이벤트 지시문은 클릭 이벤트를 처리하는 데 사용되는 AngularJS ng-click 지시문입니다. 가장 일반적인 용도는 버튼 클릭에 응답하기 위해 코드를 추가할 수 있는 AngluarJS 버튼 클릭입니다.
HTML 요소는 다음을 사용하여 적절하게 사용자에게 숨기거나 표시할 수도 있습니다. AngularJS ng-show 지시어, Angular ng-hide 지시문 및 ng-visible 속성.

AngularJS 이벤트

AngularJS의 ng-click 지시문이란 무엇입니까?

AngularJS의 ng-click 구문

AngularJS의 ng-click 예

관련 기사

AngularJS의 ng-show 지시문이란 무엇입니까?

AngularJS의 ng-show 구문

AngularJS의 ng-show 예

AngularJS의 ng-hide 지시문이란 무엇입니까?

AngularJS의 ng-hide 구문

AngularJS의 ng-hide 예

AngularJS 이벤트 리스너 지시문

제품 개요

뉴스레터 신청하기