>  기사  >  웹 프론트엔드  >  AngularJS에서 클릭 이벤트를 정의하는 방법은 무엇입니까? Anglejs 이벤트에 대한 자세한 소개

AngularJS에서 클릭 이벤트를 정의하는 방법은 무엇입니까? Anglejs 이벤트에 대한 자세한 소개

寻∝梦
寻∝梦원래의
2018-09-08 15:42:282128검색

이 글에서는 주로 angularjs의 이벤트에 대한 자세한 분석과 Anglejs의 ng-click 명령 예시, 그리고 마지막으로 HTML 숨겨진 요소 분석을 소개합니다. 이 글을 함께 살펴볼까요


AngularJS Events

AngularJS에는 자체 HTML 이벤트 지시어가 있습니다.

ng-click 지시문

ng-click 지시문은 AngularJS 클릭 이벤트를 정의합니다.


AngularJS 예

<p ng-app="" ng-controller="myCtrl">

<버튼 ng-click="횟수 = count + 1">클릭하세요!</button>

<p>{{ count}} t & lt; 보이는 부분. ng-hide="true" HTML 요소가 보이지 않도록 설정하세요. ng-hide="false"
HTML 요소가 표시되도록 설정합니다.


AngularJS 예제

<p ng-app=" myApp" ng-controller="personCtrl">

#🎜🎜 #<button ng-click="toggle()">#🎜🎜 #>숨기기/표시</button>
<
p ng-hide="myVar"> 이름: <
input type="text" ng-model= "이름"><br> 이름: <
input type="텍스트" ng-model="성"><br#🎜 🎜#><
br>전체 이름: {{firstName + " " + lastName}}
<
/p> <

/p> <

script>var app = angle.module('myApp', []);#🎜 🎜#app.controller('personCtrl', function($scope) { $scope.firstName = "John", $scope.lastName = "Doe"
$scope.myVar = 거짓;
$scope.toggle = function() {
             $scope.myVar = !$scope.myVar;
    };
});
</script>

애플리케이션 분석:

1부 personController은 컨트롤러 장과 유사합니다. .

응용 프로그램에는 기본 속성이 있습니다. $scope.myVar = false;

ng-hide 지시어는 myVar 값에 따라

요소와 두 입력 필드가 표시되는지 여부를 설정합니다. (참 또는 거짓) 표시 여부를 설정합니다.

toggle() 함수는 myVar 변수의 값(true 및 false)을 전환하는 데 사용됩니다.

ng-hide="true" 요소를 보이지 않게 만듭니다.

Show HTML 요소

ng-show 명령을 사용하여 애플리케이션의 일부를 표시할지 여부를 설정할 수 있습니다.

ng-show="false"는 HTML 요소를 보이지 않게 설정할 수 있습니다.

ng-show="true" HTML 요소가 표시되도록 설정할 수 있습니다.

다음 예제에서는 ng-show 지시문을 사용합니다.

AngularJS 예제

<p ng-app="myApp" ng-controller="personCtrl">

<button ng -클릭= "toggle()">隐藏/显示</button>

<p ng-show="myVar" >
이름: <input type="text" ng-model="firstName"><br>
姓: < input type="text" ng-model="lastName"><br>
< br>
姓명: {{이름 + " " + 성}}
</p>

</p>

< script>
var app = angle.module('myApp', []);
app.controller('personCtrl', function($scope) {
    $scope.firstName = "John",
    $scope .lastName = "Doe"
    $scope.myVar = true;
    $scope.toggle = function() {
        $scope.myVar = !$scope.myVar;
    }
});
</script>

이 기사는 여기에서 끝납니다. 질문이 있으시면 아래에 메시지를 남겨주세요.

위 내용은 AngularJS에서 클릭 이벤트를 정의하는 방법은 무엇입니까? Anglejs 이벤트에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.