Plusieurs cas d'affichage et de masquage d'éléments à l'aide d'AngularJS

Plusieurs cas d'affichage et de masquage d'éléments à l'aide d'AngularJS_AngularJS

WBOY

Libérer： 2016-05-16 15:27:00

original

1756 Les gens l'ont consulté

Cas 1 : Il existe n façons de contrôler l'affichage et le masquage des éléments HTML : caché de HTML, affichage de CSS, hide() et show() de jquery, .hide de bootstrap. Aujourd'hui, l'accent n'est pas mis sur l'affichage et le masquage, mais sur la surveillance de la valeur d'une certaine variable booléenne et la modification automatique de l'état d'affichage et de masquage de l'élément. Fonction d'écoute, si jugement, sélection de dom, réglage de dom, cela ne peut pas se faire en 5 lignes de code, et cela n'a aucun contenu technique.
Regardez le 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>

Copier après la connexion

Cas 2 : Afficher et masquer des éléments est une fonctionnalité essentielle pour les menus, les outils contextuels et bien d'autres situations. Comme d'autres fonctions d'Angularr, Angular pilote l'actualisation de l'interface utilisateur en modifiant le modèle de données, puis reflète les modifications apportées à l'interface utilisateur via des instructions.
Les fonctions des deux instructions ng-show et ng-hide sont équivalentes, mais les effets opérationnels sont exactement opposés. Nous pouvons à la fois afficher ou masquer des éléments en fonction de l'expression passée. En d'autres termes, ng-show affichera l'élément lorsque l'expression est vraie et masquera l'élément lorsqu'elle est fausse, tandis que ng-hide est exactement le contraire ;
Le principe de fonctionnement de ces deux instructions est le suivant : définissez le style de l'élément sur display:block pour afficher l'élément en fonction de la situation réelle ; définissez-le sur display:none pour masquer l'élément ;
Exemple :

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

Copier après la connexion

Résultat de l'exécution :

Cliquez sur le bouton "Toggle Menu", l'effet est le suivant :

Cliquez à nouveau sur le bouton « Toggle Menu » et les informations ci-dessous seront à nouveau masquées et alternativement modifiées.

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

Copier après la connexion

La fonction de la directive ng-switch est d'afficher les éléments correspondant avec succès. Cette directive doit être utilisée en conjonction avec les directives ng-switch-when et ng-switch-default.

Lorsque la valeur spécifiée correspond à un ou plusieurs éléments avec la directive ng-switch-when ajoutée, ces éléments sont affichés et les éléments sans correspondance sont masqués.

Si aucun élément correspondant à la valeur on n'est trouvé, l'élément avec la directive ng-switch-default ajoutée sera affiché.

Ci-dessus sont trois cas d'affichage et de masquage dans AngularJS partagés avec vous. J'espère que cela vous sera utile pour votre apprentissage.