AngularJS_AngularJS를 사용하여 요소를 표시하고 숨기는 여러 사례-JS 튜토리얼-php.cn

AngularJS_AngularJS를 사용하여 요소를 표시하고 숨기는 여러 사례

WBOY

풀어 주다： 2016-05-16 15:27:00

원래의

1775명이 탐색했습니다.

사례 1: html 요소의 표시 및 숨기기를 제어하는 방법에는 html의 숨김, CSS의 표시, jquery의 hide() 및 show(), bootstrap의 .hide 등 n가지 방법이 있습니다. 오늘의 초점은 표시 및 숨기기가 아니라 특정 부울 변수의 값을 모니터링하고 요소의 표시 및 숨기기 상태를 자동으로 변경하는 것입니다. 듣기 기능, 판단, 돔 선택, 돔 설정 등을 5줄의 코드로는 할 수 없고 기술적인 내용도 없습니다.
코드를 보세요:

<!DOCTYPE html>
<html ng-app>
<head>
 <meta charset="utf-8">
 <title>ng-show and ng-hide directives</title>
</head>
<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>
</html>

로그인 후 복사

사례 2: 요소 표시 및 숨기기는 메뉴, 상황에 맞는 도구 및 기타 여러 상황의 핵심 기능입니다. Angularr의 다른 기능과 마찬가지로 Angular는 데이터 모델을 수정하여 UI 새로 고침을 구동한 다음 지침을 통해 변경 사항을 UI에 반영합니다.
ng-show 및 ng-hide 명령의 기능은 동일하지만 작동 효과는 정확히 반대입니다. 전달된 표현식을 기반으로 요소를 표시하거나 숨길 수 있습니다. 즉, ng-show는 표현식이 true인 경우 요소를 표시하고, false인 경우 요소를 숨깁니다. 반면 ng-hide는 그 반대입니다.
이 두 명령의 작동 원리는 다음과 같습니다. 실제 상황에 따라 요소를 표시하려면 요소의 스타일을 display:block으로 설정하고 요소를 숨기려면 display:none으로 설정합니다.
예:

<html ng-app='myApp'>

<head>

<title>ng-show实例</title>

</head>

<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>

</html>

로그인 후 복사

실행 결과:

"메뉴 전환" 버튼을 클릭하면 효과는 다음과 같습니다.

다시 '메뉴 전환' 버튼을 클릭하면 아래 정보가 다시 숨겨지고 번갈아 변경됩니다.

사례 3:

<!DOCTYPE html>
<html ng-app="a2_12">

 <head>
  <meta charset="utf-8">
  <title></title>
  <script type="text/javascript" src="../js/angularJs-1.2.16-min.js"></script>
  <style type="text/css">
   body{
    font-size: 12px;
   }
   ul{
    list-style-type: none;
    width: 408px;
    margin: 0px;
    padding: 0px;
   }
   div{
    margin: 8px 0px;
   }
  </style>
 </head>

 <body>
  <div ng-controller="c2_12">
   <div ng-show="{{isShow}}">脚本</div>
   <div ng-hide="{{isHide}}">1012@qq.con</div>
   <ul ng-switch on={{switch}}>
    <li ng-switch-when="1">11111111111111111</li>
    <li ng-switch-when="2">22222222222222222</li>
    <li ng-switch-default>33333333333333333</li>
   </ul>
  </div>
  <script type="text/javascript">
   var a2_12 = angular.module('a2_12', []);
   a2_12.controller('c2_12', ['$scope', function($scope) {
    $scope.isShow=true;
    $scope.isHide=false;
    $scope.switch=2;
   }]);
  </script>
 </body>

</html>

로그인 후 복사

ng-switch 지시문의 기능은 성공적으로 일치하는 요소를 표시하는 것입니다. 이 지시문은 ng-switch-when 및 ng-switch-default 지시문과 함께 사용해야 합니다.

지정된 on 값이 ng-switch-when 지시어가 추가된 하나 이상의 요소와 일치하면 해당 요소가 표시되고 일치하지 않는 요소는 숨겨집니다.

on 값과 일치하는 요소가 없으면 ng-switch-default 지시어가 추가된 요소가 표시됩니다.

위 내용은 AngularJS에서 표시하고 숨기는 세 가지 사례입니다. 학습에 도움이 되길 바랍니다.