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!
This question is related to
javascript
angularjs
remove class hideByDefault. Div will remain hidden itself till value of myvalue is false.
Just remove css from your js fiddle,use the myvaue === true.
<div ng-show="myvalue == true" class="ng-cloak">Here I am</div>
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>
<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/
You can use the ng-class tag. Have a look http://jsfiddle.net/4WK7R/3/
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.
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>
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>
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>
Very simple just do this:
<button ng-click="hideShow=(hideShow ? false : true)">Toggle</button>
<div ng-if="hideShow">hide and show content ...</div>
Source: Stackoverflow.com