Several cases of showing and hiding elements using AngularJS

Several cases of showing and hiding elements using AngularJS_AngularJS

WBOY

Release： 2016-05-16 15:27:00

Original

1795 people have browsed it

Case 1: There are n ways to control the display and hiding of html elements: html's hidden, css's display, jquery's hide() and show(), bootstrap's .hide. The focus today is not on showing and hiding, but on monitoring the value of a certain Boolean variable and automatically changing the display and hide state of the element. Listening function, if judgment, selecting dom, setting dom, it can't be done in 5 lines of code, and it has no technical content.
Look at the code:

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

Copy after login

Case 2: Showing and hiding elements is a core feature for menus, context-sensitive tools, and many other situations. Like other functions in Angularr, Angular drives UI refresh by modifying the data model, and then reflects the changes to the UI through instructions.
The functions of the two instructions ng-show and ng-hide are equivalent, but the operating effects are exactly the opposite. We can both show or hide elements based on the passed expression. In other words, ng-show will display the element when the expression is true, and will hide the element when it is false; while ng-hide is just the opposite.
The working principle of these two instructions is: set the element's style to display:block to display the element according to the actual situation; set it to display:none to hide the element.
Example:

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

Copy after login

Run result:

Click the "Toggle Menu" button, the effect is as follows:

Click the "Toggle Menu" button again, and the information below will be hidden again and alternately changed.

Case 3:

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

Copy after login

The function of the ng-switch directive is to display successfully matched elements. This directive needs to be used in conjunction with the ng-switch-when and ng-switch-default directives.

When the specified on value matches one or more elements with the ng-switch-when directive added, these elements are displayed, and unmatched elements are hidden.

If no element matching the on value is found, the element with the ng-switch-default directive added will be displayed.

The above are three cases of showing and hiding in AngularJS shared with you. I hope it will be helpful to your learning.