CODEWITHSUNDEEP
angularjs
dev333
dev333

Reputation: 799

How to show/hide a div using angularjs

I'm trying to hide a div when I click hide button.But I'm unable to show a div if I click on show button.I'm able to do only one action at a time.

If I set " $scope.showDiv = false;" as default,I'm unable to show the div even though by using the below code:

 $scope.getShow = function() {
            $scope.showDiv = true;
            window.location = "./sample.html";
        }

Can anyone please help me out regarding this issue ...

My html code:

<div ng-if="showDiv">Hello</div>
<button style="margin-left: 22px; margin-top: 16px; background-color: #73AD21"
ng-click="getShow()">Show</button>
<button style="margin-left: 22px; margin-top: 16px; background-color: #73AD21"
ng-click="getHide()">Hide</button>

My js code:

$scope.showDiv = false;
$scope.getShow = function() {
        $scope.showDiv = true;
        window.location = "./sample.html";
    }
$scope.getHide = function() {
        $scope.showDiv = false;
        window.location = "./sample.html";
    }

I'm trying to access main page from my home page.when I click show button in the home page,it should redirect to main page and show the div.when I click hide button in the home page,it should redirect to main page and hide the div.This is what I'm unable to do currently.

Upvotes: 1

Views: 5882

Answers (1)

Mike Kor
Mike Kor

Reputation: 876

As people mentioned in comments after you call 

window.location = "./sample.html";

the page might reload and code starting from

$scope.showDiv = false;

is called again. So you are in cycle when showDiv variable is always false.

What you might want to change is set if statement in the beginning 

if(window.location == "./home")
    $scope.showDiv = true;
if(window.location == "./main")
    $scope.showDiv = false;

Upvotes: 2

Related Questions