CODEWITHSUNDEEP
javascripthtmlangularjs
Doseda
Doseda

Reputation: 49

How to show hidden element with AngularJS

Hello I have a hidden div and I want to show it when I press a button in angularjs

When I click the button the div shows for a second and dissapears back.

Here is what I`ve tried.

<button ng-click="myValue = true">Click</button>
<!--SELECTEAZA DECLARATII -->        
<div ng-show="myValue" class="ng-hide">
    <b:selectOneMenu ajax="true" process="@this" label="Selecteaza declaratie"  >         
        <f:selectItems value="#{cereri.declaratii}" var="beer2" 
               itemValue="#{beer2}" itemLabel="#{beer2}" />
    </b:selectOneMenu>
</div>

This is the js class:

$scope.myValue = false;

How can I make the div show when I press the button

Thanks

Upvotes: 0

Views: 158

Answers (3)

georgeawg
georgeawg

Reputation: 48948

It works in the DEMO below.

The ng-show directive successfully removes the ng-hide class and the element becomes visible. There must be something else in your code that is causing the problem.

People will be better able to provide help if you provide code that they can use to reproduce the problem.

The DEMO

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app>
    <button ng-click="myValue = true">Click</button>
    <!--SELECTEAZA DECLARATII -->        
    <div ng-show="myValue" class="ng-hide">
        HIDDEN ELEMENT myValue = {{myValue}}
        <b:selectOneMenu ajax="true" process="@this" label="Selecteaza declaratie"  >         
            <f:selectItems value="#{cereri.declaratii}" var="beer2" 
                   itemValue="#{beer2}" itemLabel="#{beer2}" />
        </b:selectOneMenu>
    </div>
</body>

Upvotes: 2

Pawel Szalucki
Pawel Szalucki

Reputation: 32

delete ng-hide class

you have ng-show

Upvotes: -1

Bill P
Bill P

Reputation: 3618

If you have that class in your html: class="ng-hide", delete it (angularjs adds that class to hide the element when ng-show expression evaluates to false), the rest is ok:

<div ng-show="myValue">

Upvotes: 0

Related Questions