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

113

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

liamzebedee
źródło

Odpowiedzi:

218

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

<a ng-click="isReplyFormOpen = !isReplyFormOpen">Reply</a>
 <div ng-show="isReplyFormOpen" id="replyForm">
   </div>
Nitu Bansal
źródło
Używałem dokładnie tego, ale z jakiegoś powodu lokalna wartość logiczna w ng-click „przesłaniała” ten, który zadeklarowałem w kontrolerze $ scope. Problem znika, jeśli przełączę się za pomocą funkcji kontrolera: ng-click = "toggleBoolean ()". Każdy pomysł, dlaczego?
antoine
czy ustawiłeś wartość logiczną z wartością domyślną w kontrolerze? set $ scope.isReplyFormOpen = falsel pierwszy raz w funkcji kontrolera i spróbuj.
Nitu Bansal
1
Och, zdefiniowałem Boolean w kontrolerze. Dziwne jest to, że ta domyślna wartość została poprawnie odczytana przez ng-show podczas wczytywania strony, ale potem po kliknięciu ng-click zaktualizowałaby tylko ten ng-show, a nie inne na stronie (wszyscy oglądali ten sam Boolean— przynajmniej w teorii) ...
antoine
3
Rozwiązałem to. Ponieważ moje ng-kliknięcie zostało zagnieżdżone w powtórzeniu ng, utworzyło zakres potomny, który ukrywa nadrzędną wartość logiczną, gdy próbujesz zmienić jego wartość . Zobacz stackoverflow.com/questions/15388344/… . Zgodnie z najlepszymi praktykami Angular, w dyrektywach $ scope należy traktować jako tylko do odczytu.
antoine
Używam twojej sztuczki z ng-class: <span ng-click="started=!started" ng-class="started ? 'btn-danger' : 'btn-success' ">+1. Dziękuję :) ♥.
ivahidmontazer
30

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>
liamzebedee
źródło
Czy to ng-initkonieczne?
Charlie Schliesser
6
@CharlieS Nie jest konieczne, isReplyFormOpen jest undefinedpoczątkowo i!undefined == true
sceid
17

Jeśli na podstawie kliknij tutaj, jest to:

ng-click="orderReverse = orderReverse ? false : true"
Andrii Motsyk
źródło
5

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 .

James Gentes
źródło
najlepsze rozwiązanie dla booleanów
maverickosama92
0

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>
Abdallah Okasha
źródło
0

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

Vaibhav Ujjwal
źródło