Should one alternate between ng-hide and ng-show or use only one with different values

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

Solution

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
-->