4

I'm teaching myself Angular-JS and I can't find any sort of definitive answer on what the difference between ng-show and ng-hide is. To me they appear to be functionally equivelant.

I understand the difference between them and ng-if as ng-if actually removes the watchers etc. whereas show and hide seem to serve the same purpose.

Is there any kind of performance gain using one over the other or is there situations where one is preferable over the other OR is it just two sides of the same coin and you use whichever makes more logical sense to you?

Apologies if this has been asked/answered elsewhere but I couldn't find it.

Vistari
  • 697
  • 9
  • 21
  • Possible duplicate of [AngularJs: ng-show / ng-hide](http://stackoverflow.com/questions/12599637/angularjs-ng-show-ng-hide) – mugabits Nov 16 '15 at 15:57
  • Its a duplicate of neither, the first one is an issue with using show and hide, the second one is about using NG-IF rather than show or hide. I'm asking if there is any difference between show and hide, I understand the difference between NG-IF and NG-Show/hide. I even put that in my question. – Vistari Nov 16 '15 at 16:00
  • You're right about the second one. I removed it. But the first one is very similar. Both (ng-show/ng-hide) have almost identical css. The difference lies with animation. – mugabits Nov 16 '15 at 16:12
  • In the first one he's just having an issue with using NG-show and NG-hide because of incorrect syntax. Mines just a question of WHEN to use them not HOW. I guess we can agree to disagree, I did try pretty hard to find if my question had already been asked/answered on stack or any other website but I couldn't find it. – Vistari Nov 16 '15 at 20:55

4 Answers4

3

They do the opposite of each other and can be used as you want.

I think this comes down to coding preference, as some people like to write their code so that they use the method if the value is going to be true, instead of using not false!

<div ng-show="true">

instead of :

<div ng-hide="!true">
Karl Gjertsen
  • 4,690
  • 8
  • 41
  • 64
  • Thanks it's as I thought, functionally equivalent and are just preferential, thanks very much! :) – Vistari Nov 16 '15 at 16:01
3

This directives differs in one row:

ngShowDirective:

    $animate[value ? 'removeClass' : 'addClass'](element, NG_HIDE_CLASS, {
      tempClasses: NG_HIDE_IN_PROGRESS_CLASS
    });

ngHideDirective:

    $animate[value ? 'addClass' : 'removeClass'](element,NG_HIDE_CLASS, {
      tempClasses: NG_HIDE_IN_PROGRESS_CLASS
    });

Just opposite applying of ng-hide CSS class.

As you can see, there is NG_HIDE_IN_PROGRESS_CLASS.
It's ng-hide-animate css class which temporary applied in both cases.
You can use it to animate element appear/disappear.
You should use two selectors to implement bidirectional animation:

  • .animate-hide for appear
  • .animate-hide.ng-hide for hide
vp_arth
  • 14,461
  • 4
  • 37
  • 66
2

ng-show and ng-hide just set the display to 'None' but ng-if actually removes the element from DOM.

As for as performance is concerned, I think it does not make any huge difference but since ng-if removes all event handlers attached to this element and its children and also the DOM element so I think ng-show or ng-hide will be faster.

Zohaib Ijaz
  • 21,926
  • 7
  • 38
  • 60
0

ng-show and ng-hide applies display: none !important to your html with one of these directives. There is no difference between ng-show and ng-hide: it is only semantic and your choice.

So, let's suppose you have next html:

<div ng-show='condition'><p>{{text}}</p></div>

<div ng-hide='condition'><p>{{text}}</p></div>

So the in this case if your condition is true then first line of code will shows your html and hides it if your condition is false. Second line with ng-hide will do the same things but with opposite conditions: it will hides your html if your condition is true and shows it if condition is false

Andrew
  • 1,474
  • 4
  • 19
  • 27