CODEWITHSUNDEEP
javascripthtmlangularjs
thebighoncho
thebighoncho

Reputation: 405

ng-show on click in AngularJS

I'm having trouble getting ng-show to work correctly when a user clicks an icon. The behaviour should be as follows: The parent div loads and shows some content. When the user clicks the play icon, the contents of the div become hidden. However, right now it doesn't seem to be working. See code below:

<div class="col-sm-10 col-md-8 center-block" ng-show="showMe = true">

        <div class="play">
            <span class="icon_play" ng-click="showMe=false"></span>
        </div>

</div>

Upvotes: 1

Views: 376

Answers (4)

catalyst294
catalyst294

Reputation: 129

You want an expression for your ng-show, not an assignment. See the doc here: https://docs.angularjs.org/api/ng/directive/ngShow

you want something like this:

<div class="col-sm-10 col-md-8 center-block" ng-show="showMe">

        <div class="play">
            <span class="icon_play" ng-click="showMe=false"></span>
        </div>

</div>

http://jsfiddle.net/thomporter/tcVhN/

Upvotes: 0

Brent Washburne
Brent Washburne

Reputation: 13158

I think you want this:

<div class="col-sm-10 col-md-8 center-block" ng-show="showMe" ng-init="showMe = true">

Upvotes: 1

sboisse
sboisse

Reputation: 5548

This syntax is incorrect:

ng-show="showMe = true"

When evaluated, it assigns true to the field 'showMe'.

You should put instead:

ng-show="showMe"

This won't fix your problem because the field 'showMe' is not initialized to true.

So you could invert your logic:

<div class="col-sm-10 col-md-8 center-block" ng-show="!dontShowMe">

    <div class="play">
        <span class="icon_play" ng-click="dontShowMe=true"></span>
    </div>

</div>

or initialize showMe in your controller code.

Upvotes: 2

Esteban Felix
Esteban Felix

Reputation: 1561

You're setting showMe to true instead of checking if it's set to true.

<div class="col-sm-10 col-md-8 center-block" ng-show="showMe">

        <div class="play">
            <span class="icon_play" ng-click="showMe=false"></span>
        </div>

</div>

Upvotes: 0

Related Questions