22767

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.

Answer1:

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

Answer2:

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.

Answer3:

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>

Answer4:

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.

Answer5:

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

Recommend

  • Angular default select option
  • d3js v5 + Topojson v3 Optimization about joining csv & json
  • How to reduce number of 'states' with same 'templateUrl' using Angular Ui-Router
  • How to call angular function when click p-dialog close(X) button?
  • How is user.dir configured for Tomcat servlets?
  • Errno 2 using python shutil.py No such file or directory for file destination
  • How to import Navit into Eclipse and use it in own android project
  • Bootstrap Popover showing at wrong place upon zoom in/out or resizing Browser window
  • NHibernate proxyexception
  • Uber API - requests endpoint cannot read read json
  • How to validate a year I enter in textbox using jquery rule?
  • Unable to play media with vlc ocx
  • Embedded Google Maps in Rails not responsive
  • Laravel at least one field is required
  • Angular Bootstrap Carousel Slide Transition not working correctly
  • Bootstrap (v3.3.4) glyphicons not displayed in IE when refresh page (F5)
  • Is there some graphical way to create my own configuration file on SonarLint?
  • How to autopopulate a field in SugarCRM form
  • Differences in dis-assembled C code of GCC and Borland?
  • Eclipse CDT error: Unable to compile
  • htaccess add www if not subdomain, if subdomain remove www
  • Installing iPhone App to iPhone
  • How do I alternate colors in Flat List (React Native)
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Could not find rake using whenever rails
  • Cannot resolve symbol 'MyApi'
  • Get one-time binding to work for ng-if
  • Is there any way to access browser form field suggestions from JavaScript?
  • Join two tables and save into third-sql
  • How to model a transition system with SPIN
  • ActionScript 2 vs ActionScript 3 performance
  • To display the title for the current loaction in map in iphone
  • ORA-29908: missing primary invocation for ancillary operator
  • jquery mobile loadPage not working
  • Unanticipated behavior
  • Traverse Array and Display in markup
  • bootstrap to use multiple ng-app
  • Use group_by to filter specific cases while keeping NAs
  • How to set the response of a form post action to a iframe source?
  • Converting MP3 duration time