-3

My question is in regard of best practice / preferred readability in Angular 1.X with ng-show and ng-hide.

When using ng-hide and ng-show, is it advised to stick to one and to alternate the value I am evaluating or should i alternate between the two in order to keep the value in the expression the same?

See the following examples. Is one preferred over the other and if so why?

Assume that there are only two states, sportSelected can be Hockey or Football that is it, so there are two states.

Using only ng-show and switching the value 

  <div class="col-xs-4" ng-show="vm.sportSelected=='hockey'">
       NJ Devils
    </div>
    <div class="col-xs-4" ng-show="vm.sportSelected=='football'">
       NY Jets
    </div>
    <div class="col-xs-4" ng-show="vm.sportSelected=='football'">
       NY Giants
    </div>

Alternating between ng-show and ng-hide to keep the value the same 

  <div class="col-xs-4" ng-show="vm.isHockeySelected">
       NJ Devils
    </div>
    <div class="col-xs-4" ng-hide="vm.isHockeySelected">
       NY Jets
    </div>
    <div class="col-xs-4" ng-hide="vm.isHockeySelected">
       NY Giants
    </div>

The top seems more clear to me but it could just be due to poor method and variable names. I am looking through the angular documentation and I cant seem to arrive at what the preferred result is. Is one preferred over the other?

Edit: Flagged this to be closed, I realized this is pretty opinion based like tabs vs spaces even though I think one solution has benefits over the other

Frank Visaggio
  • 3,642
  • 9
  • 34
  • 71
  • They don't do the same thing. The first one won't show anything if BasketBall is selected, which is probably what you want. The second one will show NY Jets and NY Giants if BasketBall is selected, which is probably not what you want. Even if you just have Hockey and Football, choose the semantically correct option: you probably want NY Jets to appear if football is selected, not if hockey is not. – JB Nizet Aug 02 '16 at 21:29
  • There are only two options or states which I should have specified. Also this might be an awkward example as its a metaphor for something else I am working on and cant share the exact details. – Frank Visaggio Aug 03 '16 at 13:44
  • 1
    That doesn't change my point. If you introduce a third option, you want your code to still work as expected. And only the first option will do that, because the rule is that "NY Jets" should only be displayed if Football is selected. The rule is not "NY Jets" should be displayed if hockey is not selected. – JB Nizet Aug 03 '16 at 14:32
  • fantastic point thanks JB i agree 100% – Frank Visaggio Aug 03 '16 at 14:49

2 Answers2

0

ng-hide and ng-show both work in different ways. They are essentially CSS classes which either hide or show the specified div, depending on how the value evaluates.

<!-- when $scope.myValue is truthy (element is visible) -->
<div ng-show="myValue"></div>

if myValue evaluates to true then the div would be visible

<!-- when $scope.myValue is falsy (element is hidden) -->
<div ng-show="myValue" class="ng-hide"></div>

however, in the second example, the div would be hidden as the class is set to that of ng-hide.

also you can run ng-show or ng-hide to check if the value evaluates to false, like so: <div ng-show="!myValue"></div>

Due to the nature of the digest cycle in Angular, these checks will be ran on page load. If you do not want the div to be shown on the page, it can be recommendable to use ng-if, rather than ng-show or ng-hide, as it will not load on the page, as opposed to simply hiding it.

In the snippet below you will see an example working for both ng-hide and ng-show, using the value of the ng-model value response of the input checkbox 'checked'. Which gives a boolean response.

When it is clicked on, the value for 'checked' evaluates to true. When it is unclicked, the value evaluates to false. When the ng-model evaluates to false, it shows the ng-hide div, when the ng-model evalutes to true, it shows the ng-show div.

Further reading here: Angular ng-show documentation

@import url(../../components/bootstrap-3.1.1/css/bootstrap.css);
.animate-show {
  line-height: 20px;
  opacity: 1;
  padding: 10px;
  border: 1px solid black;
  background: white;
}

.animate-show.ng-hide-add, .animate-show.ng-hide-remove {
  transition: all linear 0.5s;
}

.animate-show.ng-hide {
  line-height: 0;
  opacity: 0;
  padding: 0 10px;
}

.check-element {
  padding: 10px;
  border: 1px solid black;
  background: white;
}
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-ng-show-production</title>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
  

  
</head>
<body ng-app="ngAnimate">
  Click me: <input type="checkbox" ng-model="checked" aria-label="Toggle ngHide"><br/>
<div>
  Show:
  <div class="check-element animate-show" ng-show="checked">
    <span class="glyphicon glyphicon-thumbs-up"></span> I show up when your checkbox is checked.
  </div>
</div>
<div>
  Hide:
  <div class="check-element animate-show" ng-hide="checked">
    <span class="glyphicon glyphicon-thumbs-down"></span> I hide when your checkbox is checked.
  </div>
</div>
</body>
</html>

<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->
amyloula
  • 1,556
  • 2
  • 17
  • 26
-1

Whether or not you use ng-hide or ng-show should be based on how you want the page to appear by default. If you are controlling the visibility of an element that will be hidden by default and only shown after the user completes some action (like selecting a sport), then you want to use ng-show. If the element is to be shown by default and only hidden after some user action (maybe a div that says 'select a sport' that disappears once a sport is selected), then you want to use ng-hide.

Using the directives this way will contribute more toward readability than worrying about how the boolean condition itself is specified. It also has an important practical benefit. If you use ng-hide for something that is supposed to be hidden by default, you might see the element flicker each time you load the page, because in early $digest cycles before your scope can be fully evaluated, the result of that condition will be falsy, which will cause the element to appear briefly before it disappears.

You've got the right idea in the top example (looks like you have a syntax issue with the quotes though).

wrshawn
  • 429
  • 2
  • 6