web-dev-qa-db-fra.com

Comment puis-je basculer un ng-show dans AngularJS basé sur un booléen?

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 souhaite activer ou désactiver l'affichage du formulaire. Comment puis-je faire ceci?

javascripthtmlangularjsng-show
108
liamzebedee

Il vous suffit de basculer la valeur "isReplyFormOpen" sur l'événement ng-click

<a ng-click="isReplyFormOpen = !isReplyFormOpen">Reply</a>
 <div ng-show="isReplyFormOpen" id="replyForm">
   </div>
210
Nitu Bansal

En gros, je l'ai résolu enPAS- en utilisant la valeur isReplyFormOpen chaque fois que l'utilisateur clique dessus:

<a ng-click="isReplyFormOpen = !isReplyFormOpen">Reply</a>

<div ng-init="isReplyFormOpen = false" ng-show="isReplyFormOpen" id="replyForm">
    <!-- Form -->
</div>
29
liamzebedee

Si basé sur cliquez ici c'est:

ng-click="orderReverse = orderReverse ? false : true"
17
Andrii Motsyk

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

Par exemple, cela va pas fonctionner:

<div ng-controller="ControllerA">
  <a ng-click="isReplyFormOpen = !isReplyFormOpen">Reply</a>

  <div ng-controller="ControllerB">
    <div ng-show="isReplyFormOpen" id="replyForm">
    </div>
  </div>

</div>

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 = {};
}

Ajoutez ensuite un préfixe "global" à votre clic et affichez les variables:

<div ng-controller="ControllerA">
  <a ng-click="global.isReplyFormOpen = !global.isReplyFormOpen">Reply</a>

  <div ng-controller="ControllerB">
    <div ng-show="global.isReplyFormOpen" id="replyForm">
    </div>
  </div>

</div>

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

5
James Gentes

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

HTML

          <ul class="sidebar-menu" id="nav-accordion">
             <li class="sub-menu">
                  <a href="" ng-click="hasSubMenu('dashboard')">
                      <i class="fa fa-book"></i>
                      <span>Dashboard</span>
                      <i class="fa fa-angle-right pull-right"></i>
                  </a>
                  <ul class="sub" ng-show="showDash">
                      <li><a ng-class="{ active: isActive('/dashboard/loan')}" href="#/dashboard/loan">Loan</a></li>
                      <li><a ng-class="{ active: isActive('/dashboard/recovery')}" href="#/dashboard/recovery">Recovery</a></li>
                  </ul>
              </li>
              <li class="sub-menu">
                  <a href="" ng-click="hasSubMenu('customerCare')">
                      <i class="fa fa-book"></i>
                      <span>Customer Care</span>
                      <i class="fa fa-angle-right pull-right"></i>
                  </a>
                  <ul class="sub" ng-show="showCC">
                      <li><a ng-class="{ active: isActive('/customerCare/eligibility')}" href="#/CC/eligibility">Eligibility</a></li>
                      <li><a ng-class="{ active: isActive('/customerCare/transaction')}" href="#/CC/transaction">Transaction</a></li>
                  </ul>
              </li>
          </ul>

Il y a deux fonctions que j'ai d'abord appelées est ng-click = hasSubMenu ('tableau de bord'). Cette fonction sera utilisée pour basculer le menu et cela est expliqué dans le code ci-dessous. La ng-class = "{active: isActive ('/ customerCare/transaction')} ajoutera une classe active à l'élément de menu actuel. 

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

Premièrement, ajoutez une dépendance $ rootScope qui est utilisée pour déclarer des variables et des fonctions. Pour en savoir plus sur $ roootScope, consultez le lien suivant: 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. Les menus seront fermés 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;
            }

il restera 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 ne pouvez utiliser la fonction isActive () que si vous avez un menu unique sans sous-menu . Vous pouvez modifier le code en fonction de vos besoins . J'espère que cela vous aidera. Passez une bonne journée :)

0
Vaibhav Ujjwal

Voici un exemple d'utilisation des directives ng click et ng-if.

Remarque : that ng-if supprime l'élément du DOM, mais ng-hide masque l'affichage de l'élément.

<!-- <input type="checkbox" ng-model="hideShow" ng-init="hideShow = false"></input> -->

<input type = "button" value = "Add Book"ng-click="hideShow=(hideShow ? false : true)"> </input>
     <div ng-app = "mainApp" ng-controller = "bookController" ng-if="hideShow">
             Enter book name: <input type = "text" ng-model = "book.name"><br>
             Enter book category: <input type = "text" ng-model = "book.category"><br>
             Enter book price: <input type = "text" ng-model = "book.price"><br>
             Enter book author: <input type = "text" ng-model = "book.author"><br>


             You are entering book: {{book.bookDetails()}}
     </div>

    <script>
             var mainApp = angular.module("mainApp", []);

             mainApp.controller('bookController', function($scope) {
                $scope.book = {
                   name: "",
                   category: "",
                   price:"",
                   author: "",


                   bookDetails: function() {
                      var bookObject;
                      bookObject = $scope.book;
                      return "Book name: " + bookObject.name +  '\n' + "Book category: " + bookObject.category + "  \n" + "Book price: " + bookObject.price + "  \n" + "Book Author: " + bookObject.author;
                   }

                };
             });
    </script>
0
Abdallah Okasha