AngularJS中的隐藏和显示

        对于菜单、上下文敏感的工具以及很多其他情况来说,显示和隐藏元素是一项核心的功能。与Angualr中其他功能一样,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>

运行结果:

AngularJS中的隐藏和显示
点击“Toggle Menu”按钮,效果如下:

AngularJS中的隐藏和显示

再次点击“Toggle Menu”按钮,下面的信息又隐藏了,交替变换。

你可能感兴趣的:(JavaScript,AngularJS,ng-hide,ng-show)