angular的几种元素隐藏的方式

最新推荐文章于 2022-06-17 15:42:31 发布

原创最新推荐文章于 2022-06-17 15:42:31 发布 · 1.3w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#angular的几种隐藏元素的方法

angularJS 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了AngularJS中几种常见的元素显示与隐藏方法，包括ng-show、ng-hide、ng-if及ng-switch。通过实例展示了这些指令如何根据条件改变元素的可见状态，并探讨了它们在DOM中的存在与否对性能的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ng-show和ng-if 等几个隐藏显示元素的方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="day2/src/angular.js"></script>
		<style type="text/css">
			.box{
				width: 100px; height: 100px; background: red;
			}
			
		</style>
	</head>
	<body>
		
		<div ng-app="fristApp">
			<div ng-controller="fristController">
				<!--show方法吧display设置成none 不显示的时候在dom中-->
				<div class="box"ng-show="isShow"></div>
				<div class="box" ng-hide="isShow"></div>
				
				<!--if隐藏就不存在dom中-->
				<div class="box"ng-if="isShow"></div>
				
				<!--定义一个开关，只有当父div中子元素的相应变量值等于current时才会显示，
				其他的都会隐藏（在dom中不存在）-->
				<div ng-switch on="current">
					<div ng-switch-when="home">home</div>
					<div ng-switch-when="home1">home1</div>
					<div ng-switch-when="home2">home2</div>
				</div>
			</div>
			</div>
			
		</div>
	</body>
	<script type="text/javascript">
		var myApp = angular.module('fristApp',[]);
		myApp.controller('fristController',function($scope){
			$scope.isShow = true;
			$scope.current = "home2"
		})
	</script>
</html>