Angular Ng-show Directive Doesn't Work For Button

Question

I have angular.js web application and btn-group in there like:

....

override the style rules from Angular's (v1.2.2) injected inline stylesheet (prepended instead of appended to the head) for .ng-hide (presumably, .ng-show as well).

[ng\:cloak], [ng-cloak], [data-ng-cloak],
[x-ng-cloak], .ng-cloak, .x-ng-cloak,
.ng-hide {
    display: none !important;
}

For lack of better solution at the moment, add the angular stylesheet or specific rules that you need to your document, stylesheet or in some other fashion. (Then check for style rule changes if you change versions of Angular). If anyone has a more appropriate solution, feel free to contribute.

Solution 3:

bootstraps' .hidden-xs class adds display:block for visible elemets which breaks angular's ng-show and ng-hide classes.

Baca Juga

Instead, use a custom .my-hidden-xs class:

// my-style.css@media (max-width: 767px) {
    .my-hidden-xs {
        display: none !important;
    }
}

// index.html
<button class="btn btn-default my-hidden-xs" ng-show="show_button"></button>

Solution 4:

I ran into this issue too. Finally I found that I set the style "visibility: hidden" in my own CSS file to the div. So no matter how I change the expression in ng-show, div is always hidden. That means the visibility style in your own style is always applied, angularjs will never change this css property value. To use ng-show/ng-hide the first thing you need to make sure is that you do NOT add any show/hide style to DOM element, just hand over the control to angular.

Solution 5:

Try replacing ng-show/ng-hide with ng-if. Should do the trick :)

javascript magazin

Angular Ng-show Directive Doesn't Work For Button

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Solution 5:

Post a Comment for "Angular Ng-show Directive Doesn't Work For Button"