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?

Solution 1:

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.

Solution 2:

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

Solution 3:

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.

Solution 4:

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

Share