ฉันจะสลับ ng-show ใน AngularJS ตามบูลีนได้อย่างไร

ฉันมีแบบฟอร์มสำหรับตอบกลับข้อความที่ต้องการแสดงเมื่อisReplyFormOpenเป็นจริงเท่านั้นและทุกครั้งที่คลิกปุ่มตอบกลับฉันต้องการสลับว่าจะแสดงแบบฟอร์มหรือไม่ ฉันจะทำเช่นนี้ได้อย่างไร?

คุณเพียงแค่ต้องสลับค่าของ "isReplyFormOpen" ในเหตุการณ์ ng-click

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

โดยทั่วไปฉันแก้ไขได้โดยไม่กำหนดisReplyFormOpenค่าเมื่อใดก็ตามที่มีการคลิก:

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

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

หากคลิกที่นี่คือ:

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

เป็นที่น่าสังเกตว่าหากคุณมีปุ่มในคอนโทรลเลอร์ A และองค์ประกอบที่คุณต้องการแสดงในคอนโทรลเลอร์ B คุณอาจต้องใช้สัญกรณ์จุดเพื่อเข้าถึงตัวแปรขอบเขตข้ามคอนโทรลเลอร์

ตัวอย่างเช่นสิ่งนี้จะไม่ทำงาน:

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

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

</div>

ในการแก้ปัญหานี้ให้สร้างตัวแปรส่วนกลาง (เช่นใน Controller A หรือ Controller หลักของคุณ):

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

จากนั้นเพิ่มคำนำหน้า "global" ในการคลิกของคุณและแสดงตัวแปร:

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

สำหรับรายละเอียดเพิ่มเติมโปรดดูที่ซ้อนสหรัฐอเมริกาและซ้อนกันชมในเอกสารเชิงมุม-UI , ดูวิดีโอหรือขอบเขตความเข้าใจ

นี่คือตัวอย่างการใช้คำสั่ง ngclick & ng-if

หมายเหตุ : ng-if จะลบองค์ประกอบออกจาก DOM แต่ ng-hide เพียงแค่ซ่อนการแสดงผลขององค์ประกอบ

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

หากคุณมีหลายเมนูที่มีเมนูย่อยคุณสามารถใช้วิธีแก้ไขปัญหาด้านล่าง

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>

มีสองฟังก์ชันที่ฉันเรียกก่อนคือ ng-click = hasSubMenu ('dashboard') ฟังก์ชันนี้จะใช้เพื่อสลับเมนูและอธิบายไว้ในโค้ดด้านล่าง ng-class = "{active: isActive ('/ customerCare / transaction')} จะเพิ่มคลาสที่ใช้งานอยู่ในรายการเมนูปัจจุบัน

ตอนนี้ฉันได้กำหนดฟังก์ชันบางอย่างในแอปของฉัน:

ขั้นแรกเพิ่มการพึ่งพา $ rootScope ซึ่งใช้ในการประกาศตัวแปรและฟังก์ชัน หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ $ roootScope โปรดดูที่ลิงค์: https://docs.angularjs.org/api/ng/service/ $ rootScope

นี่คือไฟล์แอพของฉัน:

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

ฟังก์ชันข้างต้นใช้เพื่อเพิ่มคลาสที่ใช้งานอยู่ในรายการเมนูปัจจุบัน

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

โดยค่าเริ่มต้น $ rootScope.showDash และ $ rootScope.showCC ถูกตั้งค่าเป็น false จะกำหนดให้เมนูปิดเมื่อโหลดหน้าแรก หากคุณมีมากกว่าสองเมนูย่อยให้เพิ่มตามนั้น

hasSubMenu () ฟังก์ชั่นสำหรับการสลับระหว่างเมนู ฉันได้เพิ่มเงื่อนไขเล็ก ๆ

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

เมนูย่อยจะยังคงเปิดอยู่หลังจากโหลดหน้าซ้ำตามรายการเมนูที่เลือก

ฉันได้กำหนดหน้าของฉันเช่น:

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

คุณสามารถใช้ฟังก์ชัน isActive () ได้ก็ต่อเมื่อคุณมีเมนูเดียวโดยไม่มีเมนูย่อย คุณสามารถปรับเปลี่ยนรหัสตามความต้องการของคุณ หวังว่านี่จะช่วยได้ มีวันที่ดี :)