AngularJS 요소 표시 상태 변경

머리말
본 고 는 AngularJS 가 제공 하 는 ng-show 와 ng-haide 명령 을 사용 하여 특정한 불 형 변 수 를 자동 으로 감청 하여 요소 의 표시 상 태 를 바 꾸 는 것 을 설명 한다.
html 요 소 를 제어 하고 숨 기 는 방법 은 n 가지 가 있 습 니 다.html 의 hidden,css 의 display,jQuery 의 hide()와 show(),boottstrap 의 hide 입 니 다.오늘 의 중점 은 표시 와 숨 기 는 것 이 아니 라 특정한 불 변수 값 을 감청 하여 요소 표시 와 숨 기 는 상 태 를 자동 으로 바 꾸 는 것 입 니 다.감청 함수,if 판단,dom 선택,dom 설정,5 줄 코드 가 정 해 지지 않 고 기술적 함량 이 없습니다.
실례 1


<body> 
<div ng-controller="VisibleController"> 
 <p ng-show="visible">   1</p> 
 <p ng-hide="visible">   2</p> 
 <button ng-click="toggle()">  </button> 
</div> 
 
<script src="../lib/angularjs/1.2.26/angular.min.js"></script> 
<script> 
 function VisibleController($scope) { 
 $scope.visible = false; 
 $scope.toggle = function () { 
  $scope.visible = !$scope.visible; 
 } 
 } 
</script> 
</body>

두 명령 은 매우 간단 합 니 다.다만 ng-show 는 true 에 표 시 될 때 false 는 숨 기 고 ng-haide 효 과 는 반대 입 니 다.
메뉴,컨 텍스트 에 민감 한 도구,그리고 많은 다른 상황 에서 요 소 를 표시 하고 숨 기 는 것 이 핵심 적 인 기능 입 니 다.Angualr 의 다른 기능 과 마찬가지 로 Angular 는 데이터 모델 을 수정 하 는 방식 으로 UI 리 셋 을 구동 한 다음 명령 을 통 해 변경 사항 을 UI 에 반영 한다.
ng-show 와 ng-haide 라 는 두 명령 의 기능 은 등가 이지 만 운행 효 과 는 정반 대 입 니 다.우 리 는 전달 하 는 표현 식 에 따라 요 소 를 표시 하거나 숨 길 수 있 습 니 다.즉,ng-show 는 표현 식 이 true 일 때 요 소 를 표시 하고 false 일 때 요 소 를 숨 깁 니 다.ng-haide 는 정반대다.
작업 원리
이 두 명령 의 작업 원 리 는 실제 상황 에 따라 요소 의 스타일 을 display:block 으로 설정 하여 요 소 를 표시 하 는 것 이다.디 스 플레이:none 으로 요 소 를 숨 깁 니 다.
실례 2


<body ng-controller='ShowController'> 
<button ng-click="toggleMenu()">Toggle Menu</button> 
<ul ng-show='menuState.show'> 
<li>Stun</li> 
<li>Disintegrate</li> 
<li>Erase from history</li> 
</ul> 
 
<script src="lib/angular/angular.js"></script> 
<script> 
var myApp=angular.module('myApp',[]) myApp.controller('ShowController',function($scope)  {$scope.menuState={show: false},$scope.toggleMenu=function() {$scope.menuState.show=!$scope.menuState.show;}}); 
</script> 
</body>

이상 은 본 고의 모든 내용 입 니 다.본 고의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.또한 저 희 를 많이 지지 해 주시 기 바 랍 니 다!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

SpringMvc+Angularjs 멀티 파일 대량 업로드

SpringMvc 코드 jar 가방 commons-fileupload commons-io spring-mvc.xml 구성 Controller 로컬 저장 AngularJs 코드 Form 양식 커밋 위에서 말한 것은 여...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

AngularJS 요소 표시 상태 변경

좋은 웹페이지 즐겨찾기