AngularJSアプリケーション開発ガイド

2.3

 テンプレートとデータバインディング

27

図2-6　通し番号の表示

2.3.5

 表示と非表示の切り替え

メニューやコンテキスト依存のツールなど、さまざまなケースで要素の表示と非表示の切り替え

は重要な役割を果たします。

AngularJS

では、他の部分と同様にモデルの変化が

UI

の更新を主導

します。

UI

の更新に関する設定はディレクティブを通じて行われます。

ここで利用されるのは

ng-show

と

ng-hide

というディレクティブです。これらは正反対の操作

を行いますが、基本的な仕組みは共通です。指定された

Angular

式に基づき、要素を表示したり非

表示にしたりします。

ng-show

では

Angular

式が

true

と判定された場合に要素を表示し、

false

の場合に非表示にします。また、

ng-hide

は逆に、

true

の場合に非表示にして

false

の場合に表

示します。自身の意図をより適切に表現できると思うほうを利用しましょう。

これらのディレクティブは、要素を表示させる際にそのスタイルを

display:block

に指定し、

非表示にする際には

display:none

を指定するという処理を行います。

殺人光線の発射パネルという架空の例を使って説明します（図 2-7）。

<div ng-controller="DeathrayMenuController">

<button ng-click="toggleMenu()">

メニューをトグル

</button>

<ul ng-show="menuState.show"> ...