Angularjs -> ng-click and ng-show to show a div
Question
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. My code is
My fiddle: 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 answers
solution1
12 ACCPTED 2014-04-12 20:23:02
Just get rid of the display: none; from your CSS. AngularJS is in control of showing/hiding that div.
If you want to hide it by default, just set the value of scope.myvalue to false initially - which you're already doing.
solution2
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/
solution3
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
<div><button id="mybutton" ng-click="myvalue=true">Click me</button></div>
solution4
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>
solution5
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. It will work properly with ngShow directive:
<div><div ng-show="myvalue" class="ng-cloak">Here I am</div></div>
solution6
1 2014-12-04 12:27:44
只需从你的js小提琴中删除css，使用myvaue === true。
<div ng-show="myvalue == true" class="ng-cloak">Here I am</div>
solution7
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>
solution8
0 2014-04-12 20:23:14
Just remove css from your js fiddle, ng-show will controll it. AngularJS sets the display style to none (using an !important flag). And remove this class when it must be shown.
solution9
0 2014-04-12 20:23:36
remove class hideByDefault. Div will remain hidden itself till value of myvalue is false.
solution10
0 2014-04-12 20:23:55
You can use the ng-class tag. Have a look http://jsfiddle.net/4WK7R/3/
solution11
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:
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.