CODEWITHSUNDEEP
javascriptangularjsng-show
0xAX
0xAX

Reputation: 21837

Angular ng-show directive doesn't work for button

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

<div class="btn-group>
  <button class="btn btn-default hidden-xs">....</button>
  <button class="btn btn-default hidden-xs">....</button>
  <button class="btn btn-default hidden-xs">....</button>
</div>

I want to hide one of button and added:

<button ng-show="show_button">....</button>

And in controller

$scope.show_button = false;

But i see button. Why? ng-show works for whole btn-group but not for one button.

Upvotes: 2

Views: 3973

Answers (5)

MB0810
MB0810

Reputation: 1

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

Upvotes: 0

yuxiaomin
yuxiaomin

Reputation: 91

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.

Upvotes: 0

Amir Nissim
Amir Nissim

Reputation: 3323

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

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>

Upvotes: 1

jayellsbrg
jayellsbrg

Reputation: 31

I just ran into this problem using Angular v1.2.2.

It appears that Bootstrap's style rules for .hidden-xs:

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

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.

Upvotes: 1

Jayram
Jayram

Reputation: 19588

Here is the plunkr example for you. It works for me in btn-group.

Upvotes: 1

Related Questions