Wie schalte ich eine ng-Show in AngularJS basierend auf einem booleschen Wert um?

Ich habe ein Formular zum Antworten auf Nachrichten, die ich nur wann anzeigen möchte isReplyFormOpen ist wahr, und jedes Mal, wenn ich auf die Schaltfläche „Antworten“ klicke, möchte ich umschalten, ob das Formular angezeigt wird oder nicht. Wie kann ich das machen?

Sie müssen nur den Wert von “isReplyFormOpen” beim ng-click-Ereignis umschalten

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

Im Grunde löste ich es durch NICHT-ing die isReplyFormOpen Wert, wenn darauf geklickt wird:

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

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

Wenn Sie hier klicken, ist es:

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

Es ist erwähnenswert, dass Sie, wenn Sie eine Schaltfläche in Controller A und das Element, das Sie anzeigen möchten, in Controller B haben, möglicherweise die Punktnotation verwenden müssen, um über Controller hinweg auf die Bereichsvariable zuzugreifen.

Dies wird zum Beispiel nicht Arbeit:

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

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

</div>

Um dies zu lösen, erstellen Sie eine globale Variable (z. B. in Controller A oder Ihrem Hauptcontroller):

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

Fügen Sie dann Ihrem Klick ein “globales” Präfix hinzu und zeigen Sie Variablen an:

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

Weitere Einzelheiten finden Sie unter Verschachtelte Zustände und verschachtelte Ansichten in der Angular-UI-Dokumentation, ein Video anschauenoder lesen Bereiche verstehen.

Hier ist ein Beispiel für die Verwendung von ngclick- und ng-if-Direktiven.

Notiz: dass ng-if das Element aus dem DOM entfernt, aber ng-hide nur die Anzeige des Elements verbirgt.

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

Wenn Sie mehrere Menüs mit Untermenüs haben, können Sie mit der folgenden Lösung fortfahren.

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>

Es gibt zwei Funktionen, die ich zuerst aufgerufen habe: ng-click = hasSubMenu(‘dashboard’). Diese Funktion wird zum Umschalten des Menüs verwendet und im folgenden Code erklärt. Das ng-class=”{ active: isActive(‘/customerCare/transaction’)} fügt dem aktuellen Menüpunkt eine aktive Klasse hinzu.

Jetzt habe ich einige Funktionen in meiner App definiert:

Fügen Sie zuerst eine Abhängigkeit $rootScope hinzu, die zum Deklarieren von Variablen und Funktionen verwendet wird. Weitere Informationen zu $rootScope finden Sie unter folgendem Link: https://docs.angularjs.org/api/ng/service/$rootScope

Hier ist meine App-Datei:

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

Die obige Funktion wird verwendet, um dem aktuellen Menüpunkt eine aktive Klasse hinzuzufügen.

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

        var location = $location.url().split("https://stackoverflow.com/");

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

Standardmäßig sind $rootScope.showDash und $rootScope.showCC auf false gesetzt. Es wird die Menüs auf geschlossen setzen, wenn die Seite zum ersten Mal geladen wird. Wenn Sie mehr als zwei Untermenüs haben, fügen Sie entsprechend hinzu.

Die Funktion hasSubMenu() funktioniert zum Umschalten zwischen den Menüs. Ich habe eine kleine Bedingung hinzugefügt

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

es bleibt das Untermenü geöffnet, nachdem die Seite entsprechend dem ausgewählten Menüpunkt neu geladen wurde.

Ich habe meine Seiten wie folgt definiert:

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

Sie können die Funktion isActive() nur verwenden, wenn Sie ein einzelnes Menü ohne Untermenü haben. Sie können den Code entsprechend Ihrer Anforderung ändern. Hoffe, das wird helfen. Ich wünsche ihnen einen wunderbaren Tag 🙂