wake-up-neo.com

Wie kann ich eine Ng-Show in AngularJS basierend auf einem Boolean umschalten?

Ich habe ein Formular für die Beantwortung von Nachrichten, die ich nur anzeigen möchte, wenn isReplyFormOpen wahr ist, und 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?

108
liamzebedee

Sie müssen lediglich den Wert von "isReplyFormOpen" für das ng-click-Ereignis umschalten

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

Grundsätzlich löste ich es durch NICHT -ing des isReplyFormOpen-Werts, wenn darauf geklickt wird:

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

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

Wenn Sie hier klicken, ist es:

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

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

Zum Beispiel wird dies nicht funktionieren:

<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 in 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 in den Verschachtelte Zustände & Verschachtelte Ansichten in der Angular-UI-Dokumentation , Video ansehen oder lesen Sie Verständnisbereiche .

5
James Gentes

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 verwendet, um das Menü umzuschalten. Dies wird im folgenden Code erläutert. Die ng-class = "{active: isActive ('/ customerCare/transaction')} fügt dem aktuellen Menüpunkt eine aktive Klasse hinzu. 

Nun habe ich einige Funktionen in meiner App definiert:

Fügen Sie zunächst eine Abhängigkeit $ rootScope hinzu, die zum Deklarieren von Variablen und Funktionen verwendet wird. 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;
            }

es bleibt das Untermenü geöffnet, nachdem die Seite entsprechend dem ausgewählten Menüelement 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 isActive () - Funktion nur verwenden, wenn Sie ein einzelnes Menü ohne Untermenü ..__ haben. Sie können den Code entsprechend Ihren Anforderungen ändern Ich hoffe, das hilft. Ich wünsche ihnen einen wunderbaren Tag :)

0
Vaibhav Ujjwal

Hier ist ein Beispiel für die Verwendung der Anweisungen ng click und ng-if.

Hinweis : Mit dem Befehl ng-if wird das Element aus dem DOM entfernt, aber mit ng-hide wird nur die Anzeige des Elements ausgeblendet.

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