Menu
I need to show and hide a div. I do it by putting true of false values into the ng-show
<div class="drawingToolPropertie" ng-show="{{ drawingMods.settingRoof}}">
<div class="drawingToolPropertie" ng-show="{{ drawingMods.settingObs}}">
But this is what i get:
<div id="roofPropertie" class="drawingToolPropertie ng-hide" ng-hide="true">
<div id="ObstaclePropertie" class="drawingToolPropertie ng-hide" ng-hide="false">
values chage but that ng-hide class stays and as result those divs are always hidden. How do i fix this ? Why is this working like this ? I'm not using jquery.
616
Absolutely not. First of all, the two directives can trip over each other( see this JSFiddle, as provided by Joel Skrepnek), and is generally just bad design.
The ng-show and ng-hide both are directive . The difference between is : ng-show directive will show the html element if expression resilts is true and ng-hide directive hide the html element if expression result is true .
You can use [style. display]="'block'" to replace ngShow and [style. display]="'none'" to replace ngHide.
The ng-hide directive hides the HTML element if the expression evaluates to true. ng-hide is also a predefined CSS class in AngularJS, and sets the element's display to none .
ng-show/ng-hide uses no double brackets
ng-show="drawingMods.settingRoof"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
