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

Ich habe ein Formular zum Beantworten von Nachrichten, die ich nur isReplyFormOpenanzeigen möchte, wenn dies der Fall ist. Jedes Mal, wenn ich auf die Antwortschaltfläche 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>

Grundsätzlich habe ich es gelöst, indem ich den Wert bei jedem Klick NICHTisReplyFormOpen eingegeben habe:

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

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

Wenn basierend auf hier klicken, ist es:

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

Wenn Sie eine Schaltfläche in Controller A und das Element haben, das Sie in Controller B anzeigen möchten, müssen Sie möglicherweise die Punktnotation verwenden, um auf die Bereichsvariable zwischen den Controllern zuzugreifen.

Dies funktioniert beispielsweise nicht :

<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 Informationen finden Sie unter Verschachtelte Zustände und verschachtelte Ansichten in der Angular-UI-Dokumentation . Sehen Sie sich ein Video an oder lesen Sie die Bereiche zum Verständnis .

Hier ist ein Beispiel für die Verwendung der Anweisungen ngclick & ng-if.

Hinweis : ng-if entfernt das Element aus dem DOM, ng-hide verbirgt jedoch nur die Anzeige des Elements.

<!-- <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 erläutert. Die 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 zunächst eine Abhängigkeit $ rootScope hinzu, mit der Variablen und Funktionen deklariert werden. Weitere Informationen zu $ ​​roootScope 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('/');

        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. Die Menüs werden beim ersten Laden der Seite geschlossen. Wenn Sie mehr als zwei Untermenüs haben, fügen Sie diese entsprechend hinzu.

Die Funktion hasSubMenu () dient 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;
            }

Das Untermenü bleibt geöffnet, nachdem die Seite gemäß 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 Ihren Anforderungen ändern. Hoffe das wird helfen. Ich wünsche ihnen einen wunderbaren Tag :)