이 글은 주로 Angular의 클릭 버튼 제어 숨기기 및 표시 기능 구현을 소개하며, 페이지 요소의 표시 및 숨기기를 간단하게 제어하기 위한 AngularJS의 관련 운영 기술을 예제 형식으로 설명합니다. 기사에서는 Angular의 버튼 제어 숨기기 및 표시 기능 구현 예를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.
실행 효과를 먼저 살펴보겠습니다.
구체적인 코드는 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.jb51.net Angular显示隐藏</title>
<style>
.box{
width: 100px;
height: 100px;
background: red;
}
</style>
<script src="angular.min.js"></script>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("myCtrl",function ($scope) {
$scope.show=true;
$scope.fun=function () {
$scope.show=!$scope.show;
console.log($scope.show);
}
$scope.hide=true;
$scope.func=function () {
$scope.hide=!$scope.hide;
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<p class="box"ng-show="show"></p>
<button ng-click="fun()">点击切换</button>
<p ng-class="{box:hide}"></p>
<button ng-click="func()">按钮</button>
</body>
</html>위는 제가 모두를 위해 컴파일한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
Angular 2+에서 스타일 바인딩 방법은 무엇인가요? jquery에서 on과 click의 차이점은 무엇인가요? requireJS는 모듈 로더를 어떻게 구현하나요? Taobao의 JSsearch 검색 모방하기(상세 튜토리얼) js에서 MVVM 프레임워크 구현하기(상세 튜토리얼) Angularjs에서 범위 범위 설명 Javascript S에서 고성능 로딩을 달성하는 방법 순서 vue-cli를 사용하여 모바일 적응을 구성하는 방법은 무엇입니까? vue에서 echart를 사용하는 방법위 내용은 Angular에서 숨겨진 디스플레이를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
