Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
AngularJS TIPS

AngularJS TIPS

条件式の真偽に応じて表示を切り替えるには?(ng-if)

2015年5月14日

真偽条件に応じて要素の表示/非表示を切り替えるために、ng-if属性を使用する方法を解説する。

  • このエントリーをはてなブックマークに追加

 ng-if属性は、いわゆるJavaScriptのif命令に相当するディレクティブです。指定された条件式がtrueである場合にだけ、現在の要素を表示します。

 まずは具体的な例を見てみましょう。以下は、チェックボックスのオン/オフに応じて、<div id="panel">要素の表示/非表示を切り替える例です。

HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body>
<form ng-controller="myController">
  <label for="switch">表示:</label>
  <!--2チェックボックスをshowプロパティにひも付け-->
  <input id="switch" type="checkbox" ng-model="show" />
  <button ng-click="onclick()">赤色</button>
  <hr />
  <!--1変数showのtrue/falseに応じてパネルを表示/非表示-->
  <div id="panel" ng-if="show"
    style="border:solid 1px #000; width: 400px; padding: 10px;">
    あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script>
angular.module('myApp', [])
  .controller('myController', ['$scope', function($scope) {
    // showはパネルの表示/非表示を切り替えるフラグ(デフォルトはtrue)
    $scope.show = true;

    // 3[赤色]ボタンをクリックすると、パネル配下のテキストを赤色に
    $scope.onclick = function() {
      angular.element(document.getElementById('panel')).css('color', '#f00');
    }
  }]);
</script>
</body>
</html>
パネルの表示/非表示を切り替えるためのコード(if.html)
チェックボックスのオン/オフに応じてパネルを表示

[表示]にチェックを入れると表示される

チェックボックスのオン/オフに応じてパネルを非表示

[表示]のチェックを外すと非表示になる

チェックボックスのオン/オフに応じてパネルを表示/非表示

 ng-if属性には、truefalseで評価できる式を指定します(1)。この例であれば、スコープオブジェクトのshowプロパティを関連付けており、showプロパティはチェックボックスに関連付けられています(=チェックボックスのオン/オフの状態がそのままshowプロパティに設定される(2)ので、結果、チェックボックスのオン/オフによって<div id="panel">要素が表示/非表示されることになります。

ng-if属性の注意点

 チェックボックスをオン/オフにした時の文書ツリーの変化を、ブラウザー付属の開発者ツールでも確認しておきましょう。

文書ツリーの変化を確認(上:表示時、下:非表示時)

 ng-if属性による表示/非表示の切り替えは、displayスタイルプロパティによる制御ではなく、文書ツリーそのものの操作であることが分かります。条件式がfalseである時、AngularJSは該当する要素を破棄し、trueとなったタイミングで再生成するのです。

 この点は、該当の要素を動的に操作した場合などに、意図しない結果をもたらす場合があります。例えば、上の例であれば、3でボタンクリック時にパネルのテキストを赤色に変化させています*1

  • *1 elementメソッドは、jQuery互換のjqLiteオブジェクトを取得するためのメソッドです。詳しくは、後日別稿で解説の予定です。

 では、実際にサンプルを動かし、テキストを赤色に変化させた上で、パネルを非表示&再び表示状態にしてみましょう。すると、テキストの赤色が解除されていることが確認できるはずです。

非表示にする前は赤色のテキスト
非表示にする前は赤色のテキスト
非表示にした後、再表示させたパネル(黒に戻っている)
非表示にした後、再表示させたパネル(黒に戻っている)

 これは、パネルが表示時にあらためて再生成されているためです。ng-if属性を利用する場合には、表示/非表示の裏では、要素の破棄/再生成が行われているということを覚えておいてください。

 もしもこれを避けたい場合には、ng-showng-hide属性を利用します。これらのディレクティブについては、「TIPS:要素の表示/非表示を切り替えるには?」で解説しています。

処理対象:表示/非表示 カテゴリ:基本
API:ngIf(ng-if) カテゴリ:ng(コアモジュール) > directive(ディレクティブ)

※以下では、本稿の前後を合わせて5回分(第8回~第12回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

AngularJS TIPS
8. イベントリスナーを登録するには?(ng-clickなど)

AngularJSで、ディレクティブを使ってイベントリスナーを設定する方法を解説。また、イベントリスナーにイベントオブジェクトを渡して参照する方法も説明する。

AngularJS TIPS
9. ハイパーリンクを動的に生成するには?(ng-href)

スコープオブジェクト経由で動的に生成したハイパーリンクのURL設定が適切に処理されるように、ng-href属性を使用する方法を解説する。

AngularJS TIPS
10. 【現在、表示中】≫ 条件式の真偽に応じて表示を切り替えるには?(ng-if)

真偽条件に応じて要素の表示/非表示を切り替えるために、ng-if属性を使用する方法を解説する。

AngularJS TIPS
11. 要素の表示/非表示を切り替えるには?(ng-show/ng-hide/ng-open)

真偽条件に応じて要素の表示/非表示を切り替えるために、ng-show/ng-hide属性を使用する方法を解説する。また、<details>要素の表示/非表示を切り替えるng-open属性の使い方も紹介する。

AngularJS TIPS
12. 入力された区切り文字を配列に変換するには?(ng-list)

テキストボックスへの入力値を特定の区切り文字で分割して文字列の配列に変換するために、ng-list属性を使用する方法を解説する。

サイトからのお知らせ

Twitterでつぶやこう!