AngularJS TIPS
要素の表示／非表示を切り替えるには？（ng-show／ng-hide／ng-open）
真偽条件に応じて要素の表示／非表示を切り替えるために、ng-show／ng-hide属性を使用する方法を解説する。また、＜details＞要素の表示／非表示を切り替えるng-open属性の使い方も紹介する。
条件式の真偽に応じて、要素を表示／非表示状態にするには、ng-show／ng-hide属性を利用します。
まずは具体的な例を見てみましょう。以下は、チェックボックスのオンオフに応じて、<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" />
<hr />
<!--1変数showのtrue／falseに応じてパネルを表示／非表示-->
<div id="panel" ng-show="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;
}]);
</script>
</body>
</html>
|
［表示］にチェックを入れると表示される
［表示］のチェックを外すと非表示になる
ng-show属性には、true／falseで評価できる式を指定します（1）。この例であれば、スコープオブジェクトのshowプロパティを関連付けており、showプロパティはチェックボックスに関連付けられています（＝チェックボックスのオン／オフの状態がそのままshowプロパティに設定される（2）ので、結果、チェックボックスのオン／オフによって<div id="panel">要素が表示／非表示されることになります。
条件式がtrueである場合に、要素を表示するng-show属性に対して、ng-hide属性はtrueの場合に要素を非表示にします。よって、上のコードはng-hide属性を使って、以下のように書き換えることもできます。
|
<div id="panel" ng-hide="!show"
style="border:solid 1px #000; width: 400px; padding: 10px;">
|
ng-show／ng-hide属性の内部的な挙動
ng-show／ng-hide属性で要素を非表示にした場合の、文書ツリーを確認してみます。
非表示時には、要素にclass="ng-hide"属性が付与されていることが確認できます。ng-show／ng-hide属性では、スタイルシート（具体的にはdisplayプロパティ）によって、要素の表示／非表示を制御しています。
ところが、ng-if属性では、以下のように非表示時には要素ノードを破棄します。
結果として、あとから動的にスタイルを付与した場合などは、再表示時にスタイルがデフォルトの状態に戻ってしまうのです。この挙動については、「Tips：条件式の真偽に応じて表示を切り替えるには？」でも示しています。
一般的には、表示／非表示を何度も切り替えるような用途ではng-show／ng-hide属性を利用し、外のサービスから取得したデータを特定の条件で絞り込むような用途ではng-if属性を利用するとよいでしょう。
詳細の表示／非表示を制御するng-open属性
もうひとつ、<details>要素に特化した表示／非表示のためのディレクティブとして、ng-open属性があります。<details>要素は、HTML5で新たに追加された要素で、サマリー情報と追加の詳細情報を見せるための構造を表します。<details>要素自体がまだそれほど一般的に利用されているわけではないので利用頻度は少ないと思いますが、表示／非表示に関わるディレクティブとして、ここで合わせて紹介しておきます。
例えば以下は、チェックボックスのオン／オフに応じて、<details 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>
<input id="switch" type="checkbox" ng-model="show" />
<hr />
<!--サマリー／詳細情報を含んだコンテナー要素-->
<details id="panel" ng-open="show"
style="border:solid 1px #000; width: 400px; padding: 10px;">
<summary>サマリー情報</summary>
あいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそあいうえおかきくけこさしすせそ</details>
</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) {
$scope.show = true;
}]);
</script>
</body>
</html>
|
［表示］にチェックを入れると詳細が開かれる
［表示］のチェックを外すと詳細が閉じられる
<details>要素では、その配下にサマリー情報を表す<summary>要素を、その要素の直後に詳細情報を表すのが基本です。あとは、これに対してng-open属性を付与することで、その値がtrueの場合に詳細情報を表示し、さもなければ非表示にします。サマリー情報は常に表示状態である点に注意してください。
ブラウザー付属の開発者ツールなどで見ると、ng-open属性がtrueの場合に、<details>要素に対してopen属性が付与されていることが確認できます。open属性は<details>要素で詳細情報を表示することを意味します。
API：ngShow（ng-show）｜ngHide（ng-hide）｜ngIf（ng-if）｜ngOpen（ng-open） カテゴリ：ng（コアモジュール） > directive（ディレクティブ）
※以下では、本稿の前後を合わせて5回分（第9回～第13回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
11. 【現在、表示中】≫ 要素の表示／非表示を切り替えるには？（ng-show／ng-hide／ng-open）
真偽条件に応じて要素の表示／非表示を切り替えるために、ng-show／ng-hide属性を使用する方法を解説する。また、＜details＞要素の表示／非表示を切り替えるng-open属性の使い方も紹介する。
13. URL／メールアドレスからハイパーリンクを生成するには？（linky）
URL／メールアドレスの文字列データをアンカータグによるリンクに整形できるlinkyフィルターの基本的な使い方を説明する。
