How to show/hide a div using angularjs

Question

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.

but again why are you trying to redirect using window.location inside getShow and getHide function? — Sage
– Sage, Commented Jan 5, 2016 at 11:50
Why do you have window.location = "./sample.html"; everywhere? Remove it, and it should work fine. — JB Nizet
– JB Nizet, Commented Jan 5, 2016 at 11:51
If you change the location, you're telling the browser: delete everything you know about this page, download this new page and restart from scratch. First, you shouldn't use window.location to navigate between views of a single-page angular application. Second: if you do, you actually shutdown the current app, load a new page, which might start a new app. Third, even if you navigate properly, using the angular router, you can't control the visibility of some part of another view. I think you need to read a good angular tutorial, because you don't understand the basic principles of angular. — JB Nizet
– JB Nizet, Commented Jan 5, 2016 at 12:08
Listen to @JBNizet. This is too big of an error to just get an answer. You should read about angular routing. Also keep in mind that changes in one view (one page) aren't saved for another view. Each page has a separate scope. The ng-if="showDiv" actually refers to a $scope.showDiv of a different scope. Take a look into the basics of angular scope and angular routing and good luck! — Jonathan La'Fey
– Jonathan La'Fey, Commented Jan 5, 2016 at 12:19

Mike Kor · Accepted Answer · 2016-01-05 12:04:20Z

2

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;

answered Jan 5, 2016 at 12:04

Mike Kor

8765 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

dev333 Over a year ago

In the home page,I don't have that div.I just have a show and hide buttons in home page.In the main page,I have a div.If I click show button in home page,it should show a div in the main page and viceversa.

Mike Kor Over a year ago

So on home page you have hidden div with ng-if="false" and buttons? And on home page ng-if="true" and no buttons? I'm confused now :)

dev333 Over a year ago

In home page,I don't have any div,I only have two buttons.In the main page I have a div,which I need to show in the main page when a show button is clicked from the home page and viceversa

Mike Kor Over a year ago

2 pages means you have html file for each and you are switching between them using window.location.href , right? or do you have one html?

dev333 Over a year ago

Yes.I have two html files and I'm switching between them using window.location

Collectives™ on Stack Overflow

How to show/hide a div using angularjs

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related