var myApp=angular.module(‘myApp‘,[]) myApp.controller(‘ShowController‘, function($scope){ $scope.menuState = { show: false } $scope.toggleMenu = function(){ $scope.menuState.show = !$scope.menuState.show; } }
ng-show和ng-hide这两条指令的功能是等价的,但是运行效果正好相反,我们都可以根据所传递的表达式来显示或隐藏元素。也就是说,ng-show在表达式为true时将会显示元素,为false时将会隐藏元素;而ng-hide则恰好相反。
这两条指令的工作原理是:根据实际情况把元素的样式设置为display:block来显示元素;设置为display:none来隐藏元素。
<button ng-click="toggleMenu()">Toggle Menu</button> <ul ng-show=‘menuState.show‘> <li>Erase from history</li> </ul>
时间: 2024-10-19 21:18:55