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

113

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?

Liamzebedee
quelle

Antworten:

218

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>
Nitu Bansal
quelle
Ich habe genau dies verwendet, aber aus irgendeinem Grund hat der lokale Boolesche Wert in ng-click den im Controller $ scope deklarierten "überschrieben". Das Problem verschwindet, wenn ich über eine Funktion des Controllers umschalte: ng-click = "toggleBoolean ()". Irgendeine Idee warum?
Antoine
Haben Sie den Booleschen Wert standardmäßig im Controller festgelegt? setze $ scope.isReplyFormOpen = falsel zum ersten Mal in der Controller-Funktion und versuche es.
Nitu Bansal
1
Oh, ich habe den Booleschen Wert im Controller definiert. Das Seltsame ist, dass dieser Standardwert beim Laden der Seite durch ng-show korrekt gelesen wurde, aber nach dem Klicken auf ng-click nur diese ng-show aktualisiert wird und nicht andere auf der Seite (alle sehen denselben Booleschen Wert - zumindest theoretisch) ...
Antoine
3
Ich habe es gelöst. Da mein ng-click in einer ng-Wiederholung verschachtelt war, wurde ein untergeordneter Bereich erstellt, der den übergeordneten Booleschen Wert verbirgt, wenn Sie versuchen, seinen Wert zu ändern . Siehe stackoverflow.com/questions/15388344/… . Gemäß den Best Practices von Angular sollten Sie $ scope in Direktiven als schreibgeschützt behandeln.
Antoine
Ich benutze deinen Trick mit ng-class: <span ng-click="started=!started" ng-class="started ? 'btn-danger' : 'btn-success' ">+1. Danke :) ♥.
ivahidmontazer
30

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>
Liamzebedee
quelle
Ist das ng-initnotwendig?
Charlie Schliesser
6
@CharlieS Nicht notwendig, isReplyFormOpen ist undefinedanfänglich und!undefined == true
sceid
17

Wenn basierend auf hier klicken, ist es:

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

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 .

James Gentes
quelle
beste Lösung für Boolesche
maverickosama92
0

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>
Abdallah Okasha
quelle
0

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

Vaibhav Ujjwal
quelle