Afficher et masquer les fonctionnalités avec AngularJS

AngularJS nous permet d'intégrer les différents changements dans l'interface utilisateur avec les changements dans le modèle, avec cela nous pouvons ajuster des éléments tels que menus, listes, liens, etc.., de cette façon, nous réalisons une expérience plus interactive et dynamique.
L'un des effets les plus utilisés est l'affichage et le masquage, puisque de manière simple nous faisons apparaître ou non des options dans un menu en fonction des actions de l'utilisateur ou du modèle, AngularJS nous permet de l'intégrer de manière simple avec les directives ng-shgow Oui ng-cacher.
Si notre application est complexe, nous aurons sûrement des éléments sensibles au contexte, c'est-à-dire que nous pouvons utiliser un outil si les bonnes conditions sont remplies ou peut-être devrions-nous masquer certaines options de menu lorsque certaines conditions sont remplies.
ng-show et ng-hideCeci grâce à AngularJS C'est très facile à réaliser, pour cela nous utiliserons les directives ng-montrer Oui ng-cacher, qui ont un fonctionnement inverse de chacun, par exemple ng-montrer affichera l'élément tant que sa condition est vraie, si elle est fausse, il le cachera et ng-cacher il masquera l'élément tant que sa condition est vraie sinon il le montrera.
Donc, avec ces opérations, notre logique est celle qui dictera celle que nous utiliserons dans nos applications, ces directives fonctionnent en travaillant avec les styles des éléments où elles sont appliquées, donc si nous travaillons avec les propriétés bloc de visualisation montrer et affichage : aucun cacher, car nous ne voyons rien que nous ne sachions ou qui soit trop complexe pour ne pas apprendre.
Dans l'exemple suivant nous allons travailler en faisant afficher ou non un menu si nous cliquons sur une option qui le contrôle, pour cela nous devons faire ce qui suit :
1- Dans un fichier HTML nous allons inclure AngularJS puis nous allons générer le contrôleur qui nous aidera dans notre tâche, le code du contrôleur doit contrôler les actions du menu et aurait une fonction ou une méthode qui effectue le changement lorsque vous travaillez avec les états de la directive, dans ce cas nous allons travailler avec ng-montrer, voyons le code nécessaire :

 function ShowHideController ($ scope) {$ scope.menuState = {} $ scope.menuState.show = false; $ scope.cambiarMenu = function () {$ scope.menuState.show =! $ scope.menuState.show; }; } 

2- Ensuite il faut préparer nos éléments HTML pour pouvoir appliquer la directive AngularJS, pour cela nous définissons le $ portée du contrôleur et enfin nous appliquons la directive ng-montrer à la liste, voyons :

Changer de menu 
 
action1
action2
action3

Avec cela, notre menu doit être affiché ou masqué lorsque nous cliquons sur le bouton correspondant, voyons à quoi il ressemble dans notre navigateur dans les deux états. Ici, nous pouvons voir l'état initial sans éléments de menu :

Ensuite, en cliquant sur le bouton, nous pouvons voir comment le menu apparaît, ci-dessous le code que notre console détecte Javascript pour démontrer le fonctionnement de AngularJS:

Nous avons remarqué que dans le code de la console la classe a disparu ng-cacher vous permettant ainsi de voir correctement le menu.
Avec cela, nous terminons ce didacticiel où nous avons appris à utiliser les propriétés d'affichage et de masquage lorsque nous construisons une application dans AngularJS.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif