AngularJS_AngularJS를 사용하여 요소를 표시하고 숨기는 여러 사례
- WBOY원래의
- 2016-05-16 15:27:001713검색
사례 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에서 표시하고 숨기는 세 가지 사례입니다. 학습에 도움이 되길 바랍니다.