如何根据布尔值在 AngularJS 中切换 ng-show？

Posted 2023-03-05

【中文标题】如何根据布尔值在 AngularJS 中切换 ng-show？

【英文标题】：How do I toggle an ng-show in AngularJS based on a boolean?

【发布时间】：2013-10-01 20:22:21

【问题描述】：

我有一个表单用于回复我只想在isReplyFormOpen 为真时显示的消息，并且每次单击回复按钮时，我都想切换是否显示表单。我该怎么做？

【参考方案1】：

如果您有多个带有子菜单的菜单，那么您可以使用以下解决方案。

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') 它将向当前菜单项添加一个 active 类。

现在我已经在我的应用中定义了一些函数：

首先，添加一个用于声明变量和函数的依赖项 $rootScope。要了解有关 $rootScope 的更多信息，请参阅链接：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() 函数。 您可以根据需要修改代码。 希望这会有所帮助。祝你有美好的一天:)

【参考方案2】：

这是使用 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>

【参考方案3】：

如果基于点击这里是：

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

【参考方案4】：

值得注意的是，如果您在控制器 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>

要解决这个问题，请创建一个全局变量（即在控制器 A 或您的主控制器中）：

.controller('ControllerA', function ($scope) 
  $scope.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>

更多详情，请查看Nested States & Nested Views in the Angular-UI documentation、watch a video，或阅读understanding scopes。

【讨论】：

布尔值的最佳解决方案

【参考方案5】：

您只需要在 ng-click 事件上切换“isReplyFormOpen”的值

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

【讨论】：

我正在使用这个，但由于某种原因，ng-click 中的本地布尔值“覆盖”了我在控制器 $scope 中声明的那个。如果我通过控制器的功能进行切换，问题就会消失：ng-click="toggleBoolean()"。知道为什么吗？

您是否在控制器中设置了布尔值和默认值？第一次在控制器功能中设置 $scope.isReplyFormOpen =falsel。然后尝试。

哦，我确实在控制器中定义了布尔值。奇怪的是，这个默认值在页面加载时被 ng-show 正确读取，但是在点击 ng-click 之后，它只会更新这个 ng-show，而不是页面中的其他人（都在看同一个布尔值——至少在理论上）...

解决了。因为我的 ng-click 嵌套在 ng-repeat 中，所以它创建了一个子范围，当您尝试更改其值时，它会隐藏父布尔值。见***.com/questions/15388344/…。根据 Angular 最佳实践，您应该在指令中将 $scope 视为只读。

我将你的技巧与ng-class 一起使用：<span ng-click="started=!started" ng-class="started ? 'btn-danger' : 'btn-success' "> +1。谢谢 :) ♥.

【参考方案6】：

基本上，我通过 NOT 解决了这个问题 - 每次点击时都会使用 isReplyFormOpen 值：

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

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

【讨论】：

ng-init 有必要吗？

@CharlieS 没必要，isReplyFormOpen 最初是 undefined 和 !undefined == true