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

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.

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.

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

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>

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.

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

来源：https://stackoverflow.com/questions/45151858/is-there-a-way-to-do-a-ng-hide-on-a-html-div

标签

html

angularjs

ng-hide

ng-init