AngularJS改变元素显示状态
前言
本文描述使用AngularJS提供的ng-show和ng-hide指令实现自动监听某布尔型变量来改变元素显示状态。
控制html元素显示和隐藏有n种方法：html的hidden、css的display、jQuery的hide()和show()、bootstrap的.hide。今天的重点不是显示和隐藏，而是监听某个布尔变量值，自动改变元素显示和隐藏状态。监听函数、if判断、选择dom、设置dom，5行代码搞不定吧，而且毫无技术含量。
实例1
<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>
两个指令很简单，只是ng-show在true时显示，false时隐藏，而ng-hide效果相反。
对于菜单、上下文敏感的工具以及很多其他情况来说，显示和隐藏元素是一项核心的功能。与Angualr中其他功能一样，Angular是通过修改数据模型的方式来驱动UI刷新，然后通过指令把变更反应到UI上。
ng-show和ng-hide这两条指令的功能是等价的，但是运行效果正好相反，我们都可以根据所传递的表达式来显示或隐藏元素。也就是说，ng-show在表达式为true时将会显示元素，为false时将会隐藏元素；而ng-hide则恰好相反。
工作原理
这两条指令的工作原理是：根据实际情况把元素的样式设置为display:block来显示元素；设置为display:none来隐藏元素。
实例2
<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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持小牛知识库！
-
我正在react中构建简单的todo应用程序，我已经将输入字段作为子元素inputForm元素的一部分。 我可以毫无问题地将函数作为道具从父级传递给子级，但是我不能更新父级状态来存储输入字段上的值。当我在输入字段中键入时，传递的函数正常执行，但当前的托多状态没有更新。 我发现这个问题可以通过使用单一的数据流模式（如通量或回流）来避免，但由于这是我的第一个项目，我想了解如何使用基础知识。 父元素的代
-
问题内容： 当显示其父元素时，是否有任何机制可显示子元素：无？ 这种情况是隐藏选项卡上的验证错误。我想显示错误消息，即使该字段是隐藏的。 标记： CSS： 我猜这是不可能的，因为孩子没有上下文，但以防万一？ 问题答案： 不，这是不可能的。隐藏该元素，因此不会显示任何子元素。 编辑： 这可能是沿着你想要的线，如果你能够从使用切换到。 使用此方法，您可以隐藏父元素的内容，但显示所需的特定内容。唯一需要
-
这是我的减速器代码 这是我的容器组件，其中reducer auth中的状态变化没有反映SomeContainer.js 当在HeaderView.js中单击LOGOUTSUCCESS操作时，会调用LOGOUTSUCCESS操作，并且reducer'auth'更改了object中“is authenticated”的值，但该更改不会调用连接容器的“map stateToProps”函数，即使在注销之
-
有没有一个“最佳实践”来改变流中的元素？我特别指的是流管道内的元素，而不是流管道外的元素。 例如，考虑这样的情况：我希望获取用户列表，为null属性设置默认值并将其打印到控制台。 编辑：官方的流java文档声明了少量的流操作，如forEach（）和peek（），只能通过副作用来操作；这些应该小心使用。“鉴于这将是一个不干涉的行动，有什么特别使它危险呢？我所看到的例子涉及到管道之外，这显然是粗略的。
-
问题内容： 按下后如何隐藏“编辑”链接？当我按下编辑键时，是否还可以隐藏“ lorem ipsum”文本？ 问题答案：
-
主要内容：display: none,display: block,display: inline,display: inline-blockdisplay 属性是 CSS 中最重要的属性之一，主要用来控制元素的布局，通过 display 属性您可以设置元素是否显示以及如何显示。 根据元素类型的不同，每个元素都有一个默认的 display 属性值，例如 默认的 display 属性值为 block（块级元素），而 默认的 display 属性值为 inline（行内元素），您也可以手动将元素的