Ausführliche Erklärung zur Verwendung von ngShow und ngHide in AngularJS_AngularJS

Heute werfen wir einen Blick darauf, wie man die ngShow- und ngHide-Direktiven von Angular verwendet, um das zu tun, was eigentlich getan werden soll: Ein- und Ausblenden!
Was sie tun sollten

ngShow und ngHide ermöglichen es uns, verschiedene Elemente anzuzeigen oder auszublenden. Dies hilft beim Erstellen von Angular-Anwendungen, da unsere Single-Page-Anwendungen viele bewegliche Teile haben, die kommen und gehen, wenn sich der Anwendungsstatus ändert.

Das Tolle an diesen Anweisungen ist, dass wir weder CSS noch JS verwenden müssen, um sie anzuzeigen oder auszublenden. Diese werden alle von erfahrenem Angular durchgeführt.

Nutzung

Um ngShow oder ngHide zu verwenden, fügen Sie einfach die Direktive zu dem Element hinzu, das Sie anzeigen oder ausblenden möchten.

<!-- FOR BOOLEAN VALUES =============================== -->
<!-- for true values -->
<div ng-show="hello">this is a welcome message</div>  
 
 <!-- can also show if a value is false --> 
<div ng-show="!hello">this is a goodbye message</div>  
 
<!-- FOR EXPRESSIONS =============================== -->
<!-- show if the appState variable is a string of goodbye -->
<div ng-show="appState == 'goodbye'">this is a goodbye message</div> 
 
<!-- FOR FUNCTIONS =============================== -->
<!-- use a function defined in your controller to evaluate if true or false -->
<div ng-hide="checkSomething()"></div>

Sobald wir unser Markup eingerichtet haben, können wir „Hallo“ oder „Auf Wiedersehen“ auf verschiedene Arten festlegen. Sie können dies in Ihrem Angular-Controller festlegen und Ihr Div beim Laden der App ein- oder ausblenden lassen.

Das Obige kann für ng-show oder ng-hide verwendet werden. Wenn ein Wert, ein Ausdruck oder eine Funktion „true“ zurückgibt, ist etwas verborgen.

wird als boolescher Wert

verwendet

Wir erstellen den Link mit ng-click und schalten den Wert von goCats auf true oder false um.

<a href ng-click="goCats = !goCats">Toggle Cats</a>

Dann können wir ng-show verwenden, um die Kategoriebilder anzuzeigen oder auszublenden.

 
<img ng-src="http://i.imgur.com/vkW3Lhe.jpg" ng-show="goCats">

ng-src Wir verwenden ng-src, um das Bild aufzurufen, sodass Angular beim Instanziieren und Überprüfen des Bildes bestätigt, ob es ausgeblendet werden soll. Wenn wir dies nicht tun, wird das Bild beim Laden der Website eingeblendet, bis Angular erkennt, dass es ausgeblendet werden sollte.

Urteilsausdruck

Hier beurteilen wir eine aus dem Eingabefeld übergebene Zeichenfolge. Wir binden ng-mode an ein Eingabefeld, nennen es die Amino-Variable und zeigen verschiedene Bilder basierend auf dem Inhalt dieser Variablen an.

Als nächstes nennen wir unsere Variable Aminoal.

<input type="text" ng-model="aminal">

Dann verwenden wir ng-show, um die Zeichenfolge zu beurteilen.

<img ng-src="http://i.imgur.com/vkW3Lhe.jpg" ng-show="aminal == 'cat'">

Anwendung

Wir werden eine einfache Prüfung durchführen, um festzustellen, ob die Eingabe eine ungerade oder eine gerade Zahl ist. Wir werden eine Methode in unserer AngularJS-Datei erstellen:

// set the default value of our number
$scope.myNumber = 0;
   
// function to evaluate if a number is even
$scope.isEven = function(value) {
 
if (value % 2 == 0)
 return true;
else 
 return false;
 
};

Nachdem die Methode erstellt wurde, müssen wir sie als Nächstes über ng-show oder ng-hide verwenden und unsere Zahlen übergeben. Durch die Weitergabe von Zahlen durch Methoden bleiben Angular-Steuerelemente sauber und testbar.

<!-- show if our function evaluates to false -->
<div ng-show="isEven(myNumber)">
  <h2>The number is even.</h2>
</div>
  
<!-- show if our function evaluates to false -->
<div ng-show="!isEven(myNumber)">
  <h2>The number is odd.</h2>
</div>

Fazit

Mit der Anleitung dieser beiden Richtungen wird unsere Anwendung erheblich verbessert. Dies sind nur Elemente, die auf booleschen Werten, Ausdrücken und Funktionen basieren, aber diese drei Modi werden auf mehr Szenen anwendbar sein.