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

AngularJSのng-if、ng-show、ng-hideを使って、指定したHTML要素を表示、非表示の切替えを行う事が出来ます。

デモとコードサンプルはこちら
 
※目次をクリックすると目次の下部にコンテンツが表示されます。

ng-ifディレクティブ
○構文
<ANY
 ng-if=”exp”>

</ANY>
 
ng-if=”exp”のexpがtrueの場合は、<ANY>~</ANY>のHTML要素をDOMに追加し、falseの場合はDOMから削除する事によって、表示、非表示を切替える事が出来ます。

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で表示、非表示を切替えています。

サンプルコード
デモとコードサンプルはこちら
 
1)チェックボックスで表示、非表示を切り替え
 
下記サンプルでは、チェックボックスの入力結果によって”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>

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

関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください