Bagaimana cara mengaktifkan ng-show di AngularJS berdasarkan boolean?

113

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?

liamzebedee
sumber

Jawaban:

218

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

<a ng-click="isReplyFormOpen = !isReplyFormOpen">Reply</a>
 <div ng-show="isReplyFormOpen" id="replyForm">
   </div>
Nitu Bansal
sumber
Saya menggunakan ini, tetapi untuk beberapa alasan boolean lokal di ng-click "menimpa" yang saya nyatakan dalam controller $ scope. Masalahnya hilang jika saya melakukan peralihan melalui fungsi pengontrol: ng-click = "toggleBoolean ()". Tahu kenapa?
antoine
sudahkah Anda menetapkan nilai Boolean dengan default di pengontrol? set $ scope.isReplyFormOpen = falsel pertama kali dalam fungsi kontroler. dan coba.
Nitu Bansal
1
Oh, saya memang mendefinisikan Boolean di controller. Hal yang aneh adalah bahwa nilai default ini dibaca dengan benar oleh ng-show saat pemuatan halaman, tetapi setelah mengklik ng-click itu akan memperbarui hanya ng-show ini, dan bukan yang lain di halaman (semua menonton Boolean yang sama— setidaknya dalam teori) ...
antoine
3
Pecahkan itu. Karena ng-click saya bersarang di ng-repeat, itu membuat cakupan anak yang menyembunyikan Boolean induk saat Anda mencoba mengubah nilainya . Lihat stackoverflow.com/questions/15388344/… . Menurut praktik terbaik Angular, Anda harus memperlakukan $ scope sebagai arahan hanya-baca.
antoine
Saya menggunakan trik Anda dengan ng-class: <span ng-click="started=!started" ng-class="started ? 'btn-danger' : 'btn-success' ">+1. Terima kasih :) ♥.
ivahidmontazer
30

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>
liamzebedee
sumber
Apakah ng-initperlu?
Charlie Schliesser
6
@CharlieS Tidak perlu, isReplyFormOpen undefinedawalnya dan!undefined == true
sceid
17

Jika berdasarkan klik di sini:

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

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 .

James Gentes
sumber
solusi terbaik untuk boolean
maverickosama92
0

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

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

Vaibhav Ujjwal
sumber