Is there a way to do a ng-hide on a html div?
Question
I am trying to hide my div that has id="crossfade" where there is an ng-click event.
1) Is this possible? 2) What am I doing wrong?
<!DOCTYPE html>
<html lang="en" ng-app="myContent">
<head>
<meta charset="UTF-8">
<title>ShopME Tops</title>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js
"></script>
<script type="text/javascript" src="myscript.js"></script>
</head>
<body ng-controller="ContentController">
<header>
<div class="header-inner2">
<nav>
<ul class="center">
<li><a ng-click="getData('SWIMWEAR')">SWIMWEAR</a></li>
<li><a ng-click="getData('TOPS')">TOPS</a></li>
<li><a ng-click="getData('BOTTOMS')">BOTTOMS</a></li>
<li><a ng-click="getData('DRESSES')">DRESSES</a></li>
<li><a ng-click="getData('SHOES')">SHOES</a></li>
<li><a ng-click="getData('ACCESSORIES')">ACCESSORIES</a
</li>
</ul>
</nav>
</div>
</header>
<!-- crossfade images-->
<div id= "crossfade" ng-hide="getData('TOPS')">
<img src="images/cover1.png" alt="#">
<img src="images/cover2.png" alt="#">
<img src="images/cover3.png" alt="#">
<img src="images/cover4.png" alt="#">
<img src="images/cover5.png" alt="#">
</div>
<!-- Container for grid layout -->
<div class="container">
<div class="row">
<div class="col" ng-repeat="x in filtered | limitTo:4">
<img class="img-responsive1" ng-src="{{x.source}}" alt="#">
</div>
</div>
</div>
</body>
</html>
So basically, anytime something in the nav bar is clicked I want to hide the crossfade div.
Here is the line of code that Im working with :
<div id= "crossfade" ng-hide="getData('TOPS')">
So in particular, when TOPS is clicked hide the div crossfade.
Instead of this happening when I load the page I get my crossfade and my TOPS data and I cant click on anything else.
Ive also experimented with ng-if and ng-init. Ng-init almost worked but my crossfade isnt implemented in angular.js it is mainly css.
4 answers
solution1
2 ACCPTED 2017-07-17 19:16:34
Yes this is definitely possible. ng-hide expects a boolean value, either true or false. Is getData('Tops') returning a boolean in your controller? I would recommend using a $scope variable rather than a function to control the behavior of ng-hide . So in your getData() function, you could assign something like: $scope.hideCrossfade = true; .
Then in your view, just use <div id= "crossfade" ng-hide="hideCrossfade"> . You can always change $scope.hideCrossfade = false; in your controller to make the div visible again.
solution2
0 2017-07-17 19:16:21
<div id= "crossfade" ng-hide="hideCrossfade">
<img src="images/cover1.png" alt="#">
<img src="images/cover2.png" alt="#">
<img src="images/cover3.png" alt="#">
<img src="images/cover4.png" alt="#">
<img src="images/cover5.png" alt="#">
</div>
and in the controller set
$scope.hideCrossfade = true;
probably inside the function getData.
I would recommend not using ids in angular. Also, ng-show, ng-hide, ng-if = "someFunction()" is also generally discouraged.
solution3
0 2017-07-17 19:18:08
It's a little hard to figure out exactly what is wrong without seeing the getData function but from what I can see, heres some suggestions
Firstly, never bind to a function, its hard to debug and its costly performance wise.
Here is a solution that will work. I'd suggest either hard coding properties for each item or use an array. I've used a single property here for simplicity.
HTML
<header>
<div class="header-inner2">
<nav>
<ul class="center">
<li><a ng-click="showSwimwear()">SWIMWEAR</a></li>
...
</ul>
</nav>
</div>
</header>
<div id= "crossfade" ng-hide="swimwearVisible">
<img src="images/cover1.png" alt="#">
...
</div>
JS
swimwearVisible = false;
showSwimwear(){
this.swimwearVisible = !this.swimwearVisible;
}
All being well the div will show and hide when you click the link. It'll also show the current state to help you debug.
solution4
-2 2017-07-17 19:16:19
If they are in the same controller you can just set a scope variable to ng-hide. something like:
$scope.hideCrossfade = false;
function getData(mType) {
$scope.hideCrossfade = true;
}
and in your html
<div id="crossfade" ng-hide="hideCrossfade">
If your header controller and content controller are split up, you will want to use a $broadcast
in your headerController:
$scope.getData = function(mType) {
$scope.$broadcast('hideCrossfade', true);
};
and in your content controller
var deregisterFn = $scope.$on('hideCrossfade', function($event, hide) {
$scope.hideCrossfade = hide;
};
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.