AngularJSのng-if、ng-show、ng-hideを使って表示、非表示を切り替え

○構文
<ANY
　ng-showまたはng-hide=”exp”>
…
</ANY>
　
ng-show=”exp”のexpがfalseの場合（ng-hide=”exp”のexpがtrue）の場合は、デフォルトで用意されている”ng-hide”CSSクラス（display: none !important;）が自動で追加され、<ANY>～</ANY>のHTML要素が非表示となります。
　
ng-ifのようにDOMから追加、削除しているわけではなく、CSSで表示、非表示を切替えています。

デモとコードサンプルはこちら。
　
１）チェックボックスで表示、非表示を切り替え
　
下記サンプルでは、チェックボックスの入力結果によって”detail”のtrue、falseが切り替るので、年齢と住所の部分の表示を切替える事が出来ます。
　
下記例ではng-ifディレクティブを使用していますが、ng-showディレクティブでも同様の結果となります。
　

  <div class="checkbox">
    <label>
      <input type="checkbox" ng-model="detail" />詳細表示
    </label>
  </div>
  <ul>
    <li ng-repeat="person in people1">{{person.name}}
      <div ng-if="detail">
        <ul>
          <li>年齢：{{person.age}}</li>
          <li>住所：{{person.address}}</li>
        </ul>
      </div>
    </li>
  </ul>

　
２）モデルデータの属性に応じて表示、非表示を切替える
　
下記例では、モデルデータのage_vとaddress_vのtrue/falseの設定に応じて各メンバーの住所、年齢の表示、非表示を切替えています。
　
そして、この例では詳細表示部分の１行目の年齢を下記のようにCSSの設定を行っています。
.detail > *:first-child {font-weight: bold}
　
ng-ifディレクティブを使用すると年齢部分のHTML要素が削除され、住所部分の要素が１行目となってしまい、住所が太字表示となってしまいます。
　
この例では、年齢部分を太字表示にしようとしているので、ng-ifディレクティブではなく、ng-showディレクティブを使用する必要があります。
　

（HTML）
<style>
  .detail > *:first-child {font-weight: bold}
</style>
  <ul>
    <li ng-repeat="person in people1">{{person.name}}
      <ul class="detail">
        <li ng-show="person.age_v">年齢：{{person.age}}</li>
        <li ng-show="person.address_v">住所：{{person.address}}</li>
      </ul>
    </li>
  </ul>
　
（スクリプト）
  $scope.people1 = [
    { name: "相田", age: 20, age_v: true, address: "東京都品川区",address_v: false},
    { name: "伊藤", age: 55, age_v: false, address: "神奈川県横浜市",address_v:true},
    { name: "上野", age: 20, age_v: true,address: "埼玉県川越市",address_v: true},
    { name: "江藤", age: 37, age_v: false,address: "東京都世田谷区",address_v: false}
  ];