AngularJS实现元素显示和隐藏的几个案例

 更新时间:2015年12月09日 09:20:55   投稿:lijiao  
这篇文章主要介绍了AngularJS实现元素显示和隐藏的几个案例,需要的朋友可以参考下

案例一:控制html元素显示和隐藏有n种方法:html的hidden、css的display、jquery的hide()和show()、bootstrap的.hide。今天的重点不是显示和隐藏,而是监听某个布尔变量值,自动改变元素显示和隐藏状态。监听函数、if判断、选择dom、设置dom,5行代码搞不定吧,而且毫无技术含量。
看代码:

<!DOCTYPE html>
<html ng-app>
<head>
 <meta charset="utf-8">
 <title>ng-show and ng-hide directives</title>
</head>
<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>
</html>

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

运行结果:


点击“Toggle Menu”按钮,效果如下:

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

案例三:

<!DOCTYPE html>
<html ng-app="a2_12">

 <head>
  <meta charset="utf-8">
  <title></title>
  <script type="text/javascript" src="../js/angularJs-1.2.16-min.js"></script>
  <style type="text/css">
   body{
    font-size: 12px;
   }
   ul{
    list-style-type: none;
    width: 408px;
    margin: 0px;
    padding: 0px;
   }
   div{
    margin: 8px 0px;
   }
  </style>
 </head>

 <body>
  <div ng-controller="c2_12">
   <div ng-show="{{isShow}}">脚本</div>
   <div ng-hide="{{isHide}}">1012@qq.con</div>
   <ul ng-switch on={{switch}}>
    <li ng-switch-when="1">11111111111111111</li>
    <li ng-switch-when="2">22222222222222222</li>
    <li ng-switch-default>33333333333333333</li>
   </ul>
  </div>
  <script type="text/javascript">
   var a2_12 = angular.module('a2_12', []);
   a2_12.controller('c2_12', ['$scope', function($scope) {
    $scope.isShow=true;
    $scope.isHide=false;
    $scope.switch=2;
   }]);
  </script>
 </body>

</html>

ng-switch指令的功能是显示匹配成功的元素,该指令需要结合ng-switch-when和ng-switch-default指令使用。

当指定的on值与某个或多个添加ng-switch-when指令的元素匹配时,这些元素显示,未匹配到的元素的隐藏。

如果没有找到与on值相匹配的元素时,则显示添加了ng-switch-default指令的元素。

以上就是为大家分享的三个AngularJS实现显示和隐藏的三个案例,希望对大家的学习有所帮助。

相关文章

  • 利用angular自动编译andriod APK的绕坑经历分享

    利用angular自动编译andriod APK的绕坑经历分享

    这篇文章主要给大家介绍了关于如何利用angular自动编译andriod APK的绕坑经历,文中通过示例代码以及图文介绍的非常详细,对大家的学习或者使用angular具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • 一种angular的方法级的缓存注解(装饰器)

    一种angular的方法级的缓存注解(装饰器)

    本篇文章主要介绍了一种angular的方法级的缓存注解(装饰器),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • AngularJS入门心得之directive和controller通信过程

    AngularJS入门心得之directive和controller通信过程

    Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件,接下来通过本文给大家介绍AngularJS入门心得之directive和controller通信过程,对angularjs相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • Angular实现下拉框模糊查询功能示例

    Angular实现下拉框模糊查询功能示例

    这篇文章主要介绍了Angular实现下拉框模糊查询功能,涉及AngularJS事件响应及字符串查询等相关操作技巧,需要的朋友可以参考下
    2018-01-01
  • 详解Angular Forms中自定义ngModel绑定值的方式

    详解Angular Forms中自定义ngModel绑定值的方式

    在Angular应用中有两种方式来实现表单绑定,但是对于一些特殊的表单控件没法实现,这篇文章主要介绍了详解Angular Forms中自定义ngModel绑定值的方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • 详解Angular.js指令中scope类型的几种特殊情况

    详解Angular.js指令中scope类型的几种特殊情况

    AngularJs最重要也是最难理解的模块之一就是它的指令(directive)了,自定义指令配置有很多个参数,下面这篇文章主要介绍了关于Angular.js指令中scope类型的几种特殊情况,需要的朋友可以参考下。
    2017-02-02
  • angular中的post请求处理示例详解

    angular中的post请求处理示例详解

    这篇文章主要给大家介绍了关于angular中post请求处理的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用angular具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2020-06-06
  • 详解Angular数据绑定及其实现方式

    详解Angular数据绑定及其实现方式

    数据绑定是将应用程序UI或用户界面绑定到模型的机制。使用数据绑定,用户将能够使用浏览器来操纵网站上存在的元素。
    2021-05-05
  • AngularJS 入门教程之HTML DOM实例详解

    AngularJS 入门教程之HTML DOM实例详解

    本文主要介绍AngularJS HTML DOM,这里帮大家整理了详细的资料,并附实例代码详细讲解,有需要的小伙伴可以参考下
    2016-07-07
  • AngularJs Scope详解及示例代码

    AngularJs Scope详解及示例代码

    本文主要介绍AngularJs Scope的知识,这里整理了详细资料及示例代码,有兴趣的小伙伴可以参考下
    2016-09-09

最新评论