Angularjs - > ng-click和ng-show显示div
[英]Angularjs -> ng-click and ng-show to show a div
问题描述
I am trying just to display a div when user press a button, seems to be easy, but after spent a lot of time I am getting really crazy with this. 
我只想在用户按下按钮时显示一个div，看起来很容易，但是花了很多时间后我真的很疯狂。 My code is 我的代码是
My fiddle: http://jsfiddle.net/jmhostalet/4WK7R/1/ 我的小提琴： http ： //jsfiddle.net/jmhostalet/4WK7R/1/
<div ng-app>
<div ng-controller="MyCtrl">
<div><button id="mybutton" ng-click="showAlert()">Click me</button></div>
<div>Value: {{myvalue}}</div>
<div><div ng-show="myvalue" class="hideByDefault">Here I am</div></div>
</div>
</div>
and my controller 和我的控制器
function MyCtrl($scope) {
$scope.myvalue = false;
$scope.showAlert = function(){
$scope.myvalue = true;
};
}
Thank you! 谢谢！
11 个解决方案
解决方案1
12 已采纳 2014-04-12 20:23:02
Just get rid of the display: none; 摆脱display: none; from your CSS. 来自你的CSS。 AngularJS is in control of showing/hiding that div. AngularJS控制显示/隐藏该div。
If you want to hide it by default, just set the value of scope.myvalue to false initially - which you're already doing. 如果你想默认隐藏它，只需将scope.myvalue的值初始设置为false - 你已经在做了。
解决方案2
10 2016-05-14 05:04:47
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
//This will hide the DIV by default.
$scope.IsVisible = false;
$scope.ShowHide = function () {
//If DIV is visible it will be hidden and vice versa.
$scope.IsVisible = $scope.IsVisible ? false : true;
}
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<input type="button" value="Show Hide DIV" ng-click="ShowHide()" />
<br />
<br />
<div ng-show = "IsVisible">My DIV</div>
</div>
</body>
</html>
EXAMPLE : - http://jsfiddle.net/mafais/4WK7R/380/ 示例： - http://jsfiddle.net/mafais/4WK7R/380/
解决方案3
4 2015-08-08 07:26:07
This will solve the problem. 这将解决问题。 No need to write code in controller. 无需在控制器中编写代码。 And remove your css styles display:none 并删除您的CSS样式display:none
<div><button id="mybutton" ng-click="myvalue=true">Click me</button></div>
解决方案4
4 2017-04-05 13:26:07
Very simple just do this: 这很简单：
<button ng-click="hideShow=(hideShow ? false : true)">Toggle</button>
<div ng-if="hideShow">hide and show content ...</div>
解决方案5
1 2014-04-12 20:25:52
If you want to make sure your div is not visible by default use ng-cloak class instead. 如果您想确保默认情况下您的div不可见，请使用ng-cloak类。 It will work properly with ngShow directive: 它将与ngShow指令一起正常工作：
<div><div ng-show="myvalue" class="ng-cloak">Here I am</div></div>
Demo: http://jsfiddle.net/4WK7R/4/ 演示： http ： //jsfiddle.net/4WK7R/4/
解决方案6
1 2014-12-04 12:27:44
只需从你的js小提琴中删除css，使用myvaue === true。
<div ng-show="myvalue == true" class="ng-cloak">Here I am</div>
解决方案7
1
I think you can create expression to show or hide 我认为你可以创建表达来显示或隐藏
<div ng-app>
<div ng-controller="MyCtrl">
<div><button id="mybutton" ng-click="myvalue = myvalue == true ? false : true;">Click me</button></div>
<div>Value: {{myvalue}}</div>
<div><div ng-show="myvalue" class="hideByDefault">Here I am</div></div>
</div>
</div>
解决方案8
0 2014-04-12 20:23:14
Just remove css from your js fiddle, ng-show will controll it. 只需从你的js小提琴中删除css，ng-show就可以控制它。 AngularJS sets the display style to none (using an !important flag). AngularJS将显示样式设置为none（使用！important标志）。 And remove this class when it must be shown. 并在必须显示时删除此类。
解决方案9
0 2014-04-12 20:23:36
remove class hideByDefault. 删除class hideByDefault。 Div will remain hidden itself till value of myvalue is false. Div将保持隐藏，直到myvalue的值为false。
解决方案10
0 2014-04-12 20:23:55
You can use the ng-class tag. 您可以使用ng-class标记。 Have a look http://jsfiddle.net/4WK7R/3/ 看看http://jsfiddle.net/4WK7R/3/
解决方案11
0 2017-08-13 21:21:59
I implemented it something this way 我用这种方式实现了它
Controller function: 控制器功能：
app.controller("aboutController", function(){
this.selected = true;
this.toggle = function(){
this.selected = this.selected?false:true;
}
});
HTML: HTML：
<div ng-controller="aboutController as about">
<div ng-click="about.toggle()">Click Me to toggle the Fruits Name</div>
<div ng-show ="about.selected">Apple is a delicious fruit</div>
</div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.