Come si attiva uno spettacolo ng in AngularJS basato su un booleano?

Ho un modulo per rispondere ai messaggi che voglio mostrare solo quando isReplyFormOpenè vero, e ogni volta che faccio clic sul pulsante di risposta voglio alternare se il modulo viene mostrato o meno. Come posso fare questo?

Hai solo bisogno di cambiare il valore di "isReplyFormOpen" sull'evento ng-click

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

Fondamentalmente l'ho risolto NON -nando il isReplyFormOpenvalore ogni volta che viene cliccato:

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

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

Se basato su clicca qui è:

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

Vale la pena notare che se si dispone di un pulsante nel controller A e l'elemento che si desidera mostrare nel controller B, potrebbe essere necessario utilizzare la notazione a punti per accedere alla variabile di ambito tra i controller.

Ad esempio, questo non funzionerà:

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

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

</div>

Per risolvere questo problema, crea una variabile globale (ad es. Nel controller A o nel controller principale):

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

Quindi aggiungi un prefisso "globale" al tuo clic e mostra le variabili:

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

Per maggiori dettagli, controlla gli stati annidati e le viste annidate nella documentazione dell'interfaccia utente angolare , guarda un video o leggi gli ambiti di comprensione .

Ecco un esempio per utilizzare le direttive ngclick & ng-if.

Nota : ng-if rimuove l'elemento dal DOM, ma ng-hide nasconde solo la visualizzazione dell'elemento.

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

Se hai più menu con sottomenu, puoi scegliere la soluzione seguente.

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>

Ci sono due funzioni che ho chiamato per prime: ng-click = hasSubMenu ('dashboard'). Questa funzione verrà utilizzata per alternare il menu ed è spiegata nel codice seguente. Il ng-class = "{active: isActive ('/ customerCare / transaction')} aggiungerà una classe attiva alla voce di menu corrente.

Ora ho definito alcune funzioni nella mia app:

Innanzitutto, aggiungi una dipendenza $ rootScope che viene utilizzata per dichiarare variabili e funzioni. Per saperne di più su $ roootScope fare riferimento al collegamento: https://docs.angularjs.org/api/ng/service/ $ rootScope

Ecco il file della mia app:

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

La funzione precedente viene utilizzata per aggiungere una classe attiva alla voce di menu corrente.

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

Per impostazione predefinita, $ rootScope.showDash e $ rootScope.showCC sono impostati su false. Imposterà la chiusura dei menu quando la pagina viene inizialmente caricata. Se hai più di due sottomenu aggiungi di conseguenza.

La funzione hasSubMenu () funzionerà per passare da un menu all'altro. Ho aggiunto una piccola condizione

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

rimarrà aperto il sottomenu dopo aver ricaricato la pagina in base alla voce di menu selezionata.

Ho definito le mie pagine come:

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

È possibile utilizzare la funzione isActive () solo se si dispone di un singolo menu senza sottomenu. È possibile modificare il codice in base alle proprie esigenze. Spero che questo ti aiuti. Vi auguro una buona giornata :)