Javascript 如何基于布尔值在AngularJS中切换ng显示？
我有一个用于回复邮件的表单，我只想在Javascript 如何基于布尔值在AngularJS中切换ng显示？,javascript,html,angularjs,ng-show,Javascript,Html,Angularjs,Ng Show,我有一个用于回复邮件的表单，我只想在isReplyFormOpen为true时显示该表单，每次单击“回复”按钮时，我都想切换表单是否显示。我如何才能做到这一点？基本上，我解决了这个问题，每次单击时都不使用isReplyFormOpen值： <a ng-click="isReplyFormOpen = !isReplyFormOpen">Reply</a> <div ng-init="isReplyFormOpen = false" ng-show="isReply
isReplyFormOpenisReplyFormOpen<a ng-click="isReplyFormOpen = !isReplyFormOpen">Reply</a>
<div ng-init="isReplyFormOpen = false" ng-show="isReplyFormOpen" id="replyForm">
<!-- Form -->
</div>
回复
<a ng-click="isReplyFormOpen = !isReplyFormOpen">Reply</a>
<div ng-show="isReplyFormOpen" id="replyForm">
</div>
回复
<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>
，或阅读。如果基于单击此处，则为：
ng-click="orderReverse = orderReverse ? false : true"
如果您有多个带有子菜单的菜单，则可以使用以下解决方案
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>
上述函数用于将活动类添加到当前菜单项
$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。最初加载页面时，它会将菜单设置为关闭。如果有两个子菜单以上，请相应地添加
函数将用于在菜单之间切换。我增加了一个小条件
if(location[1] == 'customerCare'){
$rootScope.showCC = true;
}
else if(location[1]=='dashboard'){
$rootScope.showDash = true;
}
根据所选菜单项重新加载页面后，子菜单将保持打开状态
$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;
}
}
我将我的页面定义为：
$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>
输入图书名称：
输入图书类别：
输入图书价格：
输入图书作者：
您正在输入book:{{book.bookDetails（）}}
var mainApp=angular.module（“mainApp”，[]）；
mainApp.controller（'bookController'，函数（$scope）{
$scope.book={
姓名：“，
类别：“，
价格：“，
作者：“，
bookDetails:函数（）{
var账簿对象；
bookObject=$scope.book；
返回“图书名称：”+bookObject.name+“\n”+”图书类别：“+bookObject.category+”\n“+”图书价格：“+bookObject.price+”\n“+”图书作者：“+bookObject.Author；
}
};
});
是否需要ng init
命令？@CharlieS不需要，isReplyFormOpen最初是未定义的，并且！undefined==true
我使用的正是这个，但出于某种原因，ng click中的本地布尔值“覆盖”了我在控制器$scope中声明的布尔值。如果我通过控制器的一个函数执行切换，问题就会消失：ng click=“toggleBoolean（）”。你们知道为什么吗？你们在控制器中用默认值设置布尔值了吗？第一次在控制器函数中设置$scope.isReplyFormOpen=false，然后重试。哦，我确实在控制器中定义了布尔值。奇怪的是，页面加载时ng show正确读取了此默认值，但单击ng click后，它将只更新此ng show，而不会更新页面中的其他内容（至少在理论上，所有人都看到相同的布尔值）…解决了此问题。由于my ng click嵌套在ng repeat中，因此它创建了一个子范围，当您尝试更改其值时，该子范围将隐藏父布尔值。看见根据Angular最佳实践，您应该在指令中将$scope视为只读。我将您的技巧用于ng类
：
+1。谢谢：）♥.布尔函数的最佳解
$routeProvider
.when('/dasboard/loan', {
controller: 'LoanController',
templateUrl: './views/loan/view.html',
controllerAs: 'vm'
})
<!-- <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>