NG-IF or NG-SHOW?

by Kushal Jayswal

HTML

<div ng-app ng-init="a">

  <div class="ib">
    <p>
      <strong>ng-show</strong>
    </p>
    <p ng-show="a = true">
      "ng-show" is TRUE
    </p>

    <p ng-if="a = false">
      "ng-show" is FALSE
    </p>
  </div>

  <div class="ib">
    <p>
      <strong>ng-if</strong>
    </p>
    <p ng-if="a = true">
      "ng-if" is TRUE
    </p>

    <p ng-if="a = false">
      "ng-if" is FALSE
    </p>
  </div>

  <div class="ib fh">
    <p>
      <strong>ng-if with wrong IMAGE path</strong>
    </p>
    <p ng-if="a = true">
      "ng-if" is TRUE
      <img src="http://placehold.it/350x150">
    </p>
  </div>

  <div class="ib fh">
    <p>
      <strong>ng-show with wrong IMAGE path</strong>
    </p>
    <p ng-show="a = false">
      "ng-if" is TRUE
      <img src="http://placehold.it/avc">
    </p>
  </div>

</div>

CSS

* {
  text-align: center;
}

img {
  max-width: 100%;
  margin: 15px 0 0;
}

.ib * {
  text-align: center;
  font-family: sans-serif;
}

.ib {
  display: inline-block;
  vertical-align: top;
  width: 200px;
  height: 100px;
  padding: 15px;
  background: #fff;
  border: 1px solid #ddd;
  margin: 20px;
}

.ib.fh {
  height: auto;
}