Comment basculer un ng-show in AngularJS en fonction d'un boolean ?

Question

J'ai un formulaire pour répondre aux messages que je veux afficher uniquement lorsque isReplyFormOpen est vrai, et chaque fois que je clique sur le bouton de réponse, je veux basculer l'affichage du formulaire. Comment faire cela?

Answer 1

Vous devez simplement basculer la valeur de "isReplyFormOpen" sur l'événement ng-click

Répondre

Answer 2

Essentiellement, j'ai résolu le problème en ne pas inversant la valeur de isReplyFormOpen à chaque clic :

Répondre

Answer 3

Si basé sur cliquer ici, c'est :

ng-click="orderReverse = orderReverse ? false : true"

Answer 4

Il est bon de noter que si vous avez un bouton dans le Contrôleur A et l'élément que vous voulez afficher dans le Contrôleur B, vous devrez peut-être utiliser la notation point pour accéder à la variable de portée entre les contrôleurs.

Par exemple, cela ne fonctionnera pas:

  Répondre

Pour résoudre cela, créez une variable globale (c'est-à-dire dans le Contrôleur A ou votre Contrôleur principal):

.controller('ControllerA', function ($scope) {
  $scope.global = {};
}

Ensuite, ajoutez un préfixe 'global' à vos variables de click et d'affichage:

  Répondre

Pour plus de détails, consultez la documentation sur les états et les vues imbriquées dans Angular-UI, regardez une vidéo, ou lisez la compréhension des portées.

Answer 5

Si vous avez plusieurs menus avec des sous-menus, vous pouvez utiliser la solution ci-dessous.

HTML

                      Tableau de bord

                      Prêt
                      Récupération

                      Service client

                      Éligibilité
                      Transaction

Deux fonctions ont été appelées : tout d'abord ng-click = hasSubMenu('dashboard'). Cette fonction sera utilisée pour basculer le menu et elle est expliquée dans le code ci-dessous. Puis ng-class="{ active: isActive('/customerCare/transaction')} ajoutera une classe active à l'élément de menu actuel.

Maintenant, j'ai défini certaines fonctions dans mon application :

Tout d'abord, ajoutez une dépendance $rootScope qui est utilisée pour déclarer des variables et des fonctions. Pour en savoir plus sur $rootScope, consultez le lien : https://docs.angularjs.org/api/ng/service/ $rootScope

Voici mon fichier d'application :

 $rootScope.isActive = function (viewLocation) { 
                return viewLocation === $location.path();
        };

La fonction ci-dessus est utilisée pour ajouter une classe active à l'élément de menu actuel.

        $rootScope.showDash = false;
        $rootScope.showCC = false;

        var location = $location.url().split('/');

        if(location[1] == 'customerCare'){
            $rootScope.showCC = true;
        }
        else if(location[1]=='dashboard'){
            $rootScope.showDash = true;
        }

        $rootScope.hasSubMenu = function(menuType){
            if(menuType=='dashboard'){
                $rootScope.showCC = false;
                $rootScope.showDash = $rootScope.showDash === false ? true: false;
            }
            else if(menuType=='customerCare'){
                $rootScope.showDash = false;
                $rootScope.showCC = $rootScope.showCC === false ? true: false;
            }
        }

Par défaut, $rootScope.showDash et $rootScope.showCC sont définis sur false. Cela fermera les menus lors du chargement initial de la page. Si vous avez plus de deux sous-menus, ajoutez-les en conséquence.

La fonction hasSubMenu() fonctionnera pour basculer entre les menus. J'ai ajouté une petite condition

if(location[1] == 'customerCare'){
                $rootScope.showCC = true;
            }
            else if(location[1]=='dashboard'){
                $rootScope.showDash = true;
            }

Elle maintiendra le sous-menu ouvert après le rechargement de la page en fonction de l'élément de menu sélectionné.

J'ai défini mes pages comme suit :

$routeProvider
        .when('/dasboard/loan', {
            controller: 'LoanController',
            templateUrl: './views/loan/view.html',
            controllerAs: 'vm'
        })

Vous pouvez utiliser la fonction isActive() uniquement si vous avez un seul menu sans sous-menu. Vous pouvez modifier le code selon vos besoins. J'espère que cela vous aidera. Bonne journée :)