如何在 AngularJS 中基于布尔值切换 ng-show？

基本上，我解决了它的 没有-isReplyFormOpen值每次点击:

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


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

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

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

值得注意的是，如果在 Controller A 中有一个按钮，并且希望在 Controller B 中显示元素，那么可能需要使用点表示法来跨控制器访问 scope 变量。

For example, this will 没有 work:

<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('ControllerA', function ($scope) {
$scope.global = {};
}

Then add a 'global' prefix to your click and show 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 文档中的嵌套状态和嵌套视图、 看个视频或读取 理解范围。

If based on click here it is:

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

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

超文本标示语言

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

There are two functions i have called first is ng-click = hasSubMenu('dashboard'). This function will be used to toggle the menu and it is explained in the code below. The ng-class="{ active: isActive('/customerCare/transaction')} it will add a class active to the current menu item.

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

首先，添加一个依赖项 $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 ()函数。 您可以根据需要修改代码。 Hope this will help. Have a great day :)

下面是一个使用 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>