当前位置:小鱼儿玄机二站 > 操作系统 > AngularJS改变元素显示状态,AngularJS实现元素显示

AngularJS改变元素显示状态,AngularJS实现元素显示

文章作者:操作系统 上传时间:2019-09-03

案例一:决定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>

本文描述使用AngularJS提供的ng-show和ng-hide指令完毕全自动监听某布尔型变量来退换成分展现状态。

案例二:对于菜单、上下文敏感的工具以及广大别的意况的话,突显和遮掩成分是一项骨干的功力。与Angualr中其余职能雷同,Angular是通过修改数据模型的办法来驱动UI刷新,然后经过指令把改换反应到UI上。
ng-show和ng-hide这两条指令的机能是等价的,可是运维作效果果正好相反,我们都足以依附所传递的表明式来呈现或隐敝成分。也正是说,ng-show在表明式为true时将会来得成分,为false时将会掩饰成分;而ng-hide则恰好相反。
这两条指令的干活规律是:依照真实情形把成分的体裁设置为display:block来显示有分;设置为display:none来遮蔽成分。
实例:

垄断html成分展现和遮掩有n种方法:html的hidden、css的display、jQuery的hide()和show()、bootstrap的.hide。今日的主要不是彰显和遮掩,而是监听某些布尔变量值,自动更换成分呈现和潜伏状态。监听函数、if判别、选拔dom、设置dom,5行代码搞不定吧,並且不用本事含量。

<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>

实例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> 

图片 1

三个指令很简单,只是ng-show在true时来得,false时遮盖,而ng-hide效果相反。

点击“Toggle Menu”开关,效果如下:

对此菜单、上下文敏感的工具以及无数别样意况来讲,展现和遮蔽成分是一项基本的职能。与Angualr中其余功用雷同,Angular是因此改动数据模型的章程来驱动UI刷新,然后通过指令把退换反应到UI上。

图片 2

ng-show和ng-hide这两条指令的功能是等价的,可是运转效果正好相反,我们都足以依附所传递的表明式来展现或掩盖元素。也便是说,ng-show在表明式为true时将会议及展览示成分,为false时将会遮蔽成分;而ng-hide则恰好相反。

再也点击“Toggle Menu”按键,上面包车型客车音信又隐敝了,交替调换。

行事原理

案例三:

这两条指令的做事原理是:依照实况把成分的体制设置为display:block来显示成分;设置为display:none来隐蔽成分。

<!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>

实例2

ng-switch指令的职能是展现相称成功的要素,该指令须求组合ng-switch-when和ng-switch-default指令使用。

<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> 

当钦命的on值与有些或五个拉长ng-switch-when指令的因素匹配时,那几个因素彰显,未相配到的要素的掩盖。

如上就是本文的全体内容,希望本文的开始和结果对大家的上学恐怕职业能拉动一定的提携,同期也冀望多多协理脚本之家!

只要未有找到与on值相相称的成分时,则显示加多了ng-switch-default指令的因素。

你或者感兴趣的稿子:

  • AngularJS完毕要素展现和隐形的多少个案例
  • AngularJS中贯彻显示或掩盖动画功用的诀窍计算
  • 谈谈AngularJs中的隐蔽和显示
  • AngularJS完成DOM成分的来得与潜伏成效

如上就是为大家享受的四个AngularJS完成展现和藏身的八个案例,希望对大家的上学抱有扶助。

你只怕感兴趣的作品:

  • AngularJS中落到实处显示或遮盖动画功用的格局总括
  • 谈谈AngularJs中的掩盖和出示
  • AngularJS达成DOM成分的来得与潜伏功用
  • angularjs2 ng2 密码掩盖显示的实例代码
  • AngularJS打开页面掩盖展现表明式用法示例
  • Angular完毕的日程表功用【可增加及隐敝呈现内容】
  • 浅谈angular4 ng-content 中隐敝的内容
  • Angular达成点击开关调整遮盖和展现效果示例

本文由小鱼儿玄机二站发布于操作系统,转载请注明出处:AngularJS改变元素显示状态,AngularJS实现元素显示

关键词: