Boolean temelinde AngularJS'de bir ng-gösterisini nasıl değiştiririm?

Yalnızca isReplyFormOpendoğru olduğunda göstermek istediğim iletileri yanıtlamak için bir formum var ve yanıtla düğmesine her tıkladığımda formun gösterilip gösterilmeyeceğini değiştirmek istiyorum. Bunu nasıl yapabilirim?

Sadece ng-tıklama olayında "isReplyFormOpen" değerini değiştirmelisiniz

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

Temelde ben bunu çözmüş DEĞİL -ing isReplyFormOpeno tıklandığında değeri:

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

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

Buraya tıklamaya dayalıysa:

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

Denetleyici A'da bir düğmeniz varsa ve Denetleyici B'de göstermek istediğiniz öğe varsa, denetleyiciler arasında kapsam değişkenine erişmek için nokta gösterimini kullanmanız gerekebileceğini belirtmek gerekir.

Örneğin, bu olacak değil çalışır:

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

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

</div>

Bunu çözmek için global bir değişken oluşturun (yani Kontrolör A'da veya ana Kontrolörünüzde):

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

Ardından, tıklamanıza 'genel' bir önek ekleyin ve değişkenleri gösterin:

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

Daha fazla ayrıntı için, Angular-UI belgelerindeki İç İçe Durumlar ve İç İçe Görünümler bölümüne bakın , bir video izleyin veya kapsamları anlama konusunu okuyun .

İşte ngclick & ng-if direktiflerinin kullanımına bir örnek.

Not : ng-if, öğeyi DOM'dan kaldırır, ancak ng-hide yalnızca öğenin görünümünü gizler.

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

Alt menülere sahip birden fazla Menünüz varsa, aşağıdaki çözüme gidebilirsiniz.

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>

İlk olarak çağırdığım iki işlev, ng-click = hasSubMenu ('dashboard'). Bu fonksiyon menüyü değiştirmek için kullanılacaktır ve aşağıdaki kodda açıklanmıştır. Ng-class = "{active: isActive ('/ customerCare / transaction')}, mevcut menü öğesine aktif bir sınıf ekleyecektir.

Şimdi uygulamamda bazı işlevleri tanımladım:

İlk olarak, değişkenleri ve işlevleri bildirmek için kullanılan bir bağımlılık $ rootScope ekleyin. $ RoootScope hakkında daha fazla bilgi edinmek için bağlantıya bakın: https://docs.angularjs.org/api/ng/service/ $ rootScope

İşte benim uygulama dosyam:

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

Yukarıdaki işlev, geçerli menü öğesine aktif sınıf eklemek için kullanılır.

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

Varsayılan olarak $ rootScope.showDash ve $ rootScope.showCC false olarak ayarlanmıştır. Sayfa ilk yüklendiğinde menüleri kapalı olarak ayarlayacaktır. İkiden fazla alt menünüz varsa, buna göre ekleyin.

hasSubMenu () işlevi menüler arasında geçiş yapmak için çalışacaktır. Küçük bir koşul ekledim

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

seçilen menü öğesine göre sayfayı yeniden yükledikten sonra alt menü açık kalacaktır.

Sayfalarımı şöyle tanımladım:

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

İsActive () işlevini yalnızca alt menüsü olmayan tek bir menünüz varsa kullanabilirsiniz. Kodu ihtiyacınıza göre değiştirebilirsiniz. Umarım bu yardımcı olur. İyi günler :)