Bagaimana cara mengaktifkan ng-show di AngularJS berdasarkan boolean?

Saya memiliki formulir untuk membalas pesan yang ingin saya tampilkan hanya jika isReplyFormOpenbenar, dan setiap kali saya mengklik tombol balas, saya ingin beralih apakah formulir tersebut ditampilkan atau tidak. Bagaimana saya bisa melakukan ini?

Anda hanya perlu mengubah nilai "isReplyFormOpen" pada acara ng-click

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

Pada dasarnya saya menyelesaikannya dengan TIDAK -ing isReplyFormOpennilainya setiap kali diklik:

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

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

Jika berdasarkan klik di sini:

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

Perlu dicatat bahwa jika Anda memiliki tombol di Pengontrol A dan elemen yang ingin Anda tampilkan di Pengontrol B, Anda mungkin perlu menggunakan notasi titik untuk mengakses variabel cakupan di seluruh pengontrol.

Misalnya, ini tidak akan berhasil:

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

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

</div>

Untuk mengatasi ini, buat variabel global (mis. Di Pengontrol A atau Pengontrol utama Anda):

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

Kemudian tambahkan awalan 'global' ke klik Anda dan tampilkan variabel:

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

Untuk detail lebih lanjut, lihat Status Bersarang & Tampilan Bersarang di dokumentasi Angular-UI , tonton video , atau baca cakupan pemahaman .

Berikut adalah contoh untuk menggunakan perintah ngclick & ng-if.

Catatan : ng-if menghapus elemen dari DOM, tetapi ng-hide hanya menyembunyikan tampilan elemen.

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

Jika Anda memiliki beberapa Menu dengan Submenu, maka Anda dapat menggunakan solusi di bawah ini.

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>

Ada dua fungsi yang saya panggil pertama adalah ng-click = hasSubMenu ('dashboard'). Fungsi ini akan digunakan untuk beralih menu dan dijelaskan dalam kode di bawah ini. Ng-class = "{active: isActive ('/ customerCare / transaction')} itu akan menambahkan kelas yang aktif ke item menu saat ini.

Sekarang saya telah menentukan beberapa fungsi di aplikasi saya:

Pertama, tambahkan dependensi $ rootScope yang digunakan untuk mendeklarasikan variabel dan fungsi. Untuk mempelajari lebih lanjut tentang $ roootScope lihat link: https://docs.angularjs.org/api/ng/service/ $ rootScope

Ini file aplikasi saya:

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

Fungsi di atas digunakan untuk menambahkan kelas aktif ke item menu saat ini.

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

Secara default $ rootScope.showDash dan $ rootScope.showCC disetel ke false. Ini akan mengatur menu untuk ditutup saat halaman pertama kali dimuat. Jika Anda memiliki lebih dari dua submenu tambahkan yang sesuai.

Fungsi hasSubMenu () akan berfungsi untuk beralih di antara menu. Saya telah menambahkan kondisi kecil

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

submenu akan tetap terbuka setelah memuat ulang halaman sesuai dengan item menu yang dipilih.

Saya telah mendefinisikan halaman saya seperti:

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

Anda dapat menggunakan fungsi isActive () hanya jika Anda memiliki satu menu tanpa submenu. Anda dapat mengubah kode sesuai dengan kebutuhan Anda. Semoga ini bisa membantu. Semoga hari mu menyenangkan :)