Làm cách nào để chuyển đổi ng-show trong AngularJS dựa trên boolean?

Tôi có một biểu mẫu để trả lời tin nhắn mà tôi muốn chỉ hiển thị khi isReplyFormOpenlà đúng và mỗi khi tôi nhấp vào nút trả lời, tôi muốn chuyển đổi xem biểu mẫu có được hiển thị hay không. Tôi có thể làm cái này như thế nào?

Bạn chỉ cần chuyển đổi giá trị của "isReplyFormOpen" trên sự kiện ng-click

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

Về cơ bản, tôi đã giải quyết nó bằng cách KHÔNG ghi isReplyFormOpengiá trị bất cứ khi nào nó được nhấp vào:

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

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

Nếu dựa trên bấm vào đây thì đó là:

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

Cần lưu ý rằng nếu bạn có một nút trong Bộ điều khiển A và phần tử bạn muốn hiển thị trong Bộ điều khiển B, bạn có thể cần sử dụng ký hiệu dấu chấm để truy cập biến phạm vi trên các bộ điều khiển.

Ví dụ, điều này sẽ không hoạt động:

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

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

</div>

Để giải quyết vấn đề này, hãy tạo một biến toàn cục (tức là trong Bộ điều khiển A hoặc Bộ điều khiển chính của bạn):

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

Sau đó, thêm tiền tố 'toàn cầu' vào lần nhấp của bạn và hiển thị các biến:

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

Để biết thêm chi tiết, hãy xem các Trạng thái lồng nhau & Chế độ xem lồng nhau trong tài liệu Angular-UI , xem video hoặc đọc các phạm vi hiểu biết .

Đây là một ví dụ để sử dụng lệnh ngclick & ng-if.

Lưu ý : ng-if loại bỏ phần tử khỏi DOM, nhưng ng-hide chỉ ẩn phần hiển thị.

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

Nếu bạn có nhiều Menu với Menu con, thì bạn có thể thực hiện giải pháp dưới đây.

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>

Có hai chức năng tôi đã gọi đầu tiên là ng-click = hasSubMenu ('dashboard'). Chức năng này sẽ được sử dụng để chuyển đổi menu và nó được giải thích trong đoạn mã bên dưới. Ng-class = "{active: isActive ('/ customerCare / transaction')} nó sẽ thêm một lớp đang hoạt động vào mục menu hiện tại.

Bây giờ tôi đã xác định một số chức năng trong ứng dụng của mình:

Đầu tiên, thêm một phụ thuộc $ rootScope được sử dụng để khai báo các biến và hàm. Để tìm hiểu thêm về $ roootScope, hãy tham khảo liên kết: https://docs.angularjs.org/api/ng/service/ $ rootScope

Đây là tệp ứng dụng của tôi:

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

Hàm trên được sử dụng để thêm lớp đang hoạt động vào mục menu hiện tại.

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

Theo mặc định, $ rootScope.showDash và $ rootScope.showCC được đặt thành false. Nó sẽ đóng các menu khi trang được tải lần đầu. Nếu bạn có nhiều hơn hai menu con, hãy thêm tương ứng.

Hàm hasSubMenu () sẽ hoạt động để chuyển đổi giữa các menu. Tôi đã thêm một điều kiện nhỏ

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

nó sẽ vẫn mở menu con sau khi tải lại trang theo mục menu đã chọn.

Tôi đã xác định các trang của mình như:

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

Bạn chỉ có thể sử dụng hàm isActive () nếu bạn có một menu không có menu con. Bạn có thể sửa đổi mã theo yêu cầu của bạn. Hy vọng điều này sẽ giúp ích. Có một ngày tuyệt vời :)