如何根据布尔值在AngularJS中切换ng显示？
我有一个表单，用于回复只有在isReplyFormOpen为true时才显示的消息，每次单击回复button时，我都要切换是否显示表单。 我怎样才能做到这一点？
您只需要在ng-click事件中切换“isReplyFormOpen”的值
<a ng-click="isReplyFormOpen = !isReplyFormOpen">Reply</a> <div ng-show="isReplyFormOpen" id="replyForm"> </div>
基本上我通过NOT -ing 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中有一个button，而您想在控制器B中显示该元素，则可能需要使用点符号来跨控制器访问范围variables。
例如，这不起作用：
<div ng-controller="ControllerA"> <a ng-click="isReplyFormOpen = !isReplyFormOpen">Reply</a> <div ng-controller="ControllerB"> <div ng-show="isReplyFormOpen" id="replyForm"> </div> </div> </div>
要解决这个问题，请创build一个全局variables（即在控制器A或主控制器中）：
.controller('ControllerA', function ($scope) { $scope.global = {}; }
然后为您的点击和显示variables添加一个“全局”前缀：
<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>
有关更多详细信息，请查看Angular-UI文档中的嵌套状态和嵌套视图 ， 观看video或阅读理解范围 。
如果你有多个菜单子菜单，那么你可以去下面的解决scheme。
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'）。 此function将用于切换菜单，并在下面的代码中解释。 ng-class =“{active：isActive（'/ customerCare / transaction'）}它将为当前菜单项添加一个活动类。
现在我已经在我的应用中定义了一些function：
首先，添加一个用于声明variables和函数的依赖项$ rootScope。 要了解有关$ roootScope的更多信息，请参阅以下链接： https ：//docs.angularjs.org/api/ng/service/ $ rootScope
这是我的应用程序文件：
$rootScope.isActive = function (viewLocation) { return viewLocation === $location.path(); };
以上function用于将活动类添加到当前菜单项。
$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。 当页面被初始加载时，它将把菜单设置为closures。 如果你有两个以上的子菜单相应的添加。
hasSubMenu（）函数将在菜单之间切换。 如果（location [1] =='customerCare'）{$ rootScope.showCC = true; } else if（location [1] =='dashboard'）{$ rootScope.showDash = true; }根据select的菜单项重新加载页面后，它将保持打开的子菜单。
我已经定义了我的页面，如：
$routeProvider .when('/dasboard/loan', { controller: 'LoanController', templateUrl: './views/loan/view.html', controllerAs: 'vm' })
只有在没有子菜单的情况下，您才可以使用isActive（）函数。 您可以根据您的要求修改代码。 希望这会有所帮助。 祝你有美好的一天 ：）
这是一个使用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>
