AngularJS进阶(十)AngularJS改变元素显示状态_angular 改变修改元素

2401_84616977

于 2024-05-15 19:47:30 发布

阅读量360

点赞数 4

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84616977/article/details/138921088

版权

程序员专栏收录该内容

103 篇文章 1 订阅

订阅专栏

基础学习：

前端最基础的就是 HTML , CSS 和 JavaScript 。

网页设计：HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

```

两个指令很简单，只是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>