Jak przełączyć pokaz ng w AngularJS na podstawie wartości logicznej?

Mam formularz odpowiadania na wiadomości, który chcę wyświetlać tylko wtedy, gdy isReplyFormOpenjest prawdziwy, i za każdym razem, gdy klikam przycisk odpowiedzi, chcę przełączać, czy formularz jest wyświetlany, czy nie. W jaki sposób mogę to zrobić?

Wystarczy zmienić wartość „isReplyFormOpen” na zdarzeniu ng-click

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

Zasadniczo rozwiązałem to, NIE zaznaczając isReplyFormOpenwartości po kliknięciu:

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

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

Jeśli na podstawie kliknij tutaj, jest to:

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

Warto zauważyć, że jeśli masz przycisk w kontrolerze A i element, który chcesz wyświetlić w kontrolerze B, może być konieczne użycie notacji kropkowej, aby uzyskać dostęp do zmiennej zakresu między kontrolerami.

Na przykład to nie zadziała:

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

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

</div>

Aby rozwiązać ten problem, utwórz zmienną globalną (np. W kontrolerze A lub głównym kontrolerze):

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

Następnie dodaj przedrostek „globalny” do kliknięcia i pokaż zmienne:

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

Aby uzyskać więcej informacji, zapoznaj się z zagnieżdżonymi stanami i widokami zagnieżdżonymi w dokumentacji Angular-UI , obejrzyj wideo lub przeczytaj zrozumienie zakresów .

Oto przykład użycia dyrektyw ngclick i ng-if.

Uwaga : to ng-if usuwa element z DOM, ale ng-hide po prostu ukrywa wyświetlanie elementu.

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

Jeśli masz wiele menu z podmenu, możesz skorzystać z poniższego rozwiązania.

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>

Dwie funkcje, które najpierw wywołałem, to ng-click = hasSubMenu ('dashboard'). Ta funkcja będzie używana do przełączania menu i jest wyjaśniona w poniższym kodzie. Ng-class = "{active: isActive ('/ customerCare / transaction')} doda klasę aktywną do bieżącej pozycji menu.

Teraz zdefiniowałem kilka funkcji w mojej aplikacji:

Najpierw dodaj zależność $ rootScope, która jest używana do deklarowania zmiennych i funkcji. Aby dowiedzieć się więcej o $ roootScope, skorzystaj z łącza: https://docs.angularjs.org/api/ng/service/ $ rootScope

Oto mój plik aplikacji:

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

Powyższa funkcja służy do dodawania aktywnej klasy do bieżącej pozycji menu.

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

Domyślnie $ rootScope.showDash i $ rootScope.showCC są ustawione na false. Spowoduje to zamknięcie menu po pierwszym załadowaniu strony. Jeśli masz więcej niż dwa podmenu, dodaj odpowiednio.

Funkcja hasSubMenu () będzie działać do przełączania się między menu. Dodałem mały warunek

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

podmenu pozostanie otwarte po przeładowaniu strony zgodnie z wybraną pozycją menu.

Moje strony zdefiniowałem w następujący sposób:

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

Funkcji isActive () możesz używać tylko wtedy, gdy masz jedno menu bez podmenu. Możesz zmodyfikować kod zgodnie z wymaganiami. Mam nadzieję, że to pomoże. Miłego dnia :)