javascript – How to show hidden element with AngularJS-ThrowExceptions

Exception or error:

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

How to solve:

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>

###

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

###

delete ng-hide class

you have ng-show

Leave a Reply

Your email address will not be published. Required fields are marked *