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.

score 2 · Accepted Answer · answered Jul 17 '17 at 19:16

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.

score 0 · Answer 2 · answered Jul 17 '17 at 19:16

<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.

Chris · Answer 3 · 2017-07-17T19:34:34.633

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.

score -2 · Answer 4 · answered Jul 17 '17 at 19:16

-2

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;
};

answered Jul 17 '17 at 19:16

Ero

491
1
3
15

Using broadcast in this manner is overkill and not a neat solution. – Chris Jul 17 '17 at 19:19
if they are in separate controllers you should definitely use a broadcast – Ero Jul 17 '17 at 19:20
No, you should almost never use broadcast. Its messy and expensive performance wise. The best way for inter-controller communication is to use services OR, even better, adopt the component model and use one way bindings and function callbacks – Chris Jul 17 '17 at 19:23
then propose a solution with your way? – Ero Jul 17 '17 at 19:25
I have, but as everything is in one controller components or broadcast shouldn't be used. If you ever build an app with many components on screen you'll find using broadcasts liberally will cause the app to slow down – Chris Jul 17 '17 at 19:26
obviously if you have a ton of broadcasts and watchers it will slow it down....but for this case we talking a single one so it works very well. also if you would read my answer it clearly says that if they the header controller and content controller are split up THEN use a broadcast – Ero Jul 17 '17 at 19:27
Maybe you should look up the latest Angular guidelines on components as it's worth a read https://docs.angularjs.org/guide/component – Chris Jul 17 '17 at 19:29

Is there a way to do a ng-hide on a html div?

4 Answers4

Linked

Related