AngularJS TIPS
条件式の真偽に応じて表示を切り替えるには？（ng-if）
真偽条件に応じて要素の表示／非表示を切り替えるために、ng-if属性を使用する方法を解説する。
ng-if属性は、いわゆるJavaScriptのif命令に相当するディレクティブです。指定された条件式がtrueである場合にだけ、現在の要素を表示します。
まずは具体的な例を見てみましょう。以下は、チェックボックスのオン／オフに応じて、<div id="panel">要素の表示／非表示を切り替える例です。
|
<!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>
|
［表示］にチェックを入れると表示される
［表示］のチェックを外すと非表示になる
ng-if属性には、true／falseで評価できる式を指定します（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-show／ng-hide属性を利用します。これらのディレクティブについては、「TIPS：要素の表示／非表示を切り替えるには？」で解説しています。
API：ngIf（ng-if） カテゴリ：ng（コアモジュール） > directive（ディレクティブ）
※以下では、本稿の前後を合わせて5回分（第8回～第12回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
8. イベントリスナーを登録するには？（ng-clickなど）
AngularJSで、ディレクティブを使ってイベントリスナーを設定する方法を解説。また、イベントリスナーにイベントオブジェクトを渡して参照する方法も説明する。
10. 【現在、表示中】≫ 条件式の真偽に応じて表示を切り替えるには？（ng-if）
真偽条件に応じて要素の表示／非表示を切り替えるために、ng-if属性を使用する方法を解説する。
11. 要素の表示／非表示を切り替えるには？（ng-show／ng-hide／ng-open）
真偽条件に応じて要素の表示／非表示を切り替えるために、ng-show／ng-hide属性を使用する方法を解説する。また、＜details＞要素の表示／非表示を切り替えるng-open属性の使い方も紹介する。
