首页 > Web开发 > 详细

AngularJS中的隐藏和显示

时间:2015-09-12 19:03:18      阅读:294      评论:0      收藏:0      [点我收藏+]
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>

 

AngularJS中的隐藏和显示

原文:http://www.cnblogs.com/Lin-Edge/p/4803353.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!