Explication détaillée de la façon d'utiliser ngShow et ngHide dans AngularJS_AngularJS

Aujourd'hui, nous allons voir comment utiliser les directives ngShow et ngHide d'Angular pour faire ce qu'elles semblent devoir être fait, afficher et masquer !
Ce qu'ils devraient faire

ngShow et ngHide nous permettent d'afficher ou de masquer différents éléments. Cela est utile lors de la création d'applications angulaires, car nos applications d'une seule page comporteront de nombreuses pièces mobiles qui vont et viennent à mesure que l'état de l'application change.

L’avantage de ces directives est que nous n’avons pas besoin d’utiliser CSS ou JS pour les afficher ou les masquer. Tout cela est réalisé par Angular expérimenté.

Utilisation

Pour utiliser ngShow ou ngHide, ajoutez simplement la directive à l'élément que vous souhaitez afficher ou masquer.

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

Une fois que nous avons configuré notre balisage, nous pouvons définir bonjour ou au revoir de différentes manières. Vous pouvez définir cela dans votre contrôleur angulaire et afficher ou masquer votre div lors du chargement de l'application.

Ce qui précède peut être utilisé pour ng-show ou ng-hide. Si une valeur, une expression ou une fonction renvoie vrai, quelque chose est caché.

est utilisé comme valeur booléenne

Nous allons créer le lien en utilisant ng-click et basculer la valeur de goCats sur true ou false.

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

Ensuite, nous pouvons utiliser ng-show pour afficher ou masquer les images de la catégorie.

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

ng-src Nous utilisons ng-src pour appeler l'image, donc Angular confirmera s'il doit la masquer lors de l'instanciation et de la vérification de l'image. Si nous ne le faisons pas, l'image apparaîtra au fur et à mesure du chargement du site jusqu'à ce qu'Angular se rende compte qu'elle doit être masquée.

Expression de jugement

Ici, nous jugeons une chaîne transmise depuis la zone de saisie. Nous lions ng-mode à une zone de saisie et la nommons la variable amino, et affichons différentes images en fonction du contenu de cette variable.

Ensuite, nous appellerons notre variable aminoal.

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

Ensuite, nous utiliserons ng-show pour juger la chaîne.

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

Comment utiliser

Nous effectuerons une simple vérification pour déterminer si l'entrée est un nombre impair ou pair. Nous allons créer une méthode dans notre fichier AngularJS :

// 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;
 
};

Une fois la méthode créée, la prochaine chose que nous devons faire est de l'utiliser via ng-show ou ng-hide et de transmettre nos numéros. La transmission de nombres via des méthodes maintient les contrôles angulaires propres et testables.

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

Conclusion

Grâce à ces deux directions, notre application sera grandement améliorée. Ce ne sont que des éléments affichant et masquant des fonctions basées sur des valeurs booléennes, des expressions et des fonctions, mais ces trois modes seront applicables à plus de scènes.