Heim > Artikel > Web-Frontend > Mehrere Fälle des Ein- und Ausblendens von Elementen mithilfe von AngularJS_AngularJS

Mehrere Fälle des Ein- und Ausblendens von Elementen mithilfe von AngularJS_AngularJS

WBOYOriginal: 2016-05-16 15:27:001713Durchsuche

Fall 1: Es gibt n Möglichkeiten, die Anzeige und das Ausblenden von HTML-Elementen zu steuern: HTML's Hidden, CSS's Display, JQuery's hide() und show(), Bootstrap's .hide. Der Fokus liegt heute nicht mehr auf dem Ein- und Ausblenden, sondern auf der Überwachung des Werts einer bestimmten booleschen Variablen und der automatischen Änderung des Anzeige- und Ausblendzustands des Elements. Zuhörfunktion, ob Beurteilung, Auswahl von Dom, Einstellung von Dom, dies kann nicht in 5 Codezeilen durchgeführt werden und hat keinen technischen Inhalt.
Schauen Sie sich den Code an:

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

Fall 2: Das Ein- und Ausblenden von Elementen ist eine Kernfunktion für Menüs, kontextsensitive Werkzeuge und viele andere Situationen. Wie andere Funktionen in Angularr steuert Angular die Aktualisierung der Benutzeroberfläche durch Ändern des Datenmodells und spiegelt dann die Änderungen an der Benutzeroberfläche durch Anweisungen wider.
Die Funktionen der beiden Anweisungen ng-show und ng-hide sind gleichwertig, aber die Betriebseffekte sind genau das Gegenteil. Wir können Elemente basierend auf dem übergebenen Ausdruck ein- oder ausblenden. Mit anderen Worten: ng-show zeigt das Element an, wenn der Ausdruck wahr ist, und verbirgt das Element, wenn es falsch ist, während ng-hide genau das Gegenteil ist.
Das Funktionsprinzip dieser beiden Anweisungen ist: Stellen Sie den Stil des Elements auf display:block ein, um das Element entsprechend der tatsächlichen Situation anzuzeigen. Stellen Sie ihn auf display:none ein, um das Element auszublenden.
Beispiel:

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

Laufergebnis:

Klicken Sie auf die Schaltfläche „Menü umschalten“. Der Effekt ist wie folgt:

Klicken Sie erneut auf die Schaltfläche „Menü umschalten“. Die folgenden Informationen werden wieder ausgeblendet und abwechselnd geändert.

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

Die Funktion der ng-switch-Anweisung besteht darin, erfolgreich übereinstimmende Elemente anzuzeigen. Diese Anweisung muss in Verbindung mit den ng-switch-when- und ng-switch-default-Anweisungen verwendet werden.

Wenn der angegebene on-Wert mit einem oder mehreren Elementen mit der hinzugefügten ng-switch-when-Direktive übereinstimmt, werden diese Elemente angezeigt und nicht übereinstimmende Elemente werden ausgeblendet.

Wenn kein Element gefunden wird, das dem on-Wert entspricht, wird das Element mit der hinzugefügten ng-switch-default-Direktive angezeigt.

Die oben genannten drei Fälle des Ein- und Ausblendens in AngularJS werden Ihnen hoffentlich hilfreich sein.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Perfekte Implementierung der Bootstrap-Paging-Query_Javascript-FähigkeitenNächster Artikel：Perfekte Implementierung der Bootstrap-Paging-Query_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen