AngularJS HTML DOM
AngularJS は HTML DOM 要素の属性にアプリケーションデータをバインドするディレクティブを提供します。
ng-disabled ディレクティブ
ng-disabledディレクティブはアプリケーションデータを HTML の disabled 属性に直接バインドします。
AngularJS 例
<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">クリック！</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">ボタン
</p>
<p>
{{ mySwitch }}
</p>
</div>
<p>
<button ng-disabled="mySwitch">クリック！</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">ボタン
</p>
<p>
{{ mySwitch }}
</p>
</div>
試してみる »
例の説明：
ng-disabledディレクティブはアプリケーションデータ "mySwitch" を HTML の disabled 属性にバインドします。
ng-modelディレクティブは "mySwitch" を HTML の input checkbox 要素の内容（value）にバインドします。
もしmySwitchためにtrue、ボタンは使用できません:
<p>
<button disabled>クリック！</button>
</p>
<button disabled>クリック！</button>
</p>
もしmySwitchためにfalse、ボタンは使用できます:
<p>
<button>クリック！</button>
</p>
<button>クリック！</button>
</p>
ng-show ディレクティブ
ng-showディレクティブは HTML 要素を非表示または表示します。
AngularJS 例
<div ng-app="">
<p ng-show="true">私は見えます。</p>
<p ng-show="false">私は見えません。</p>
</div>
<p ng-show="true">私は見えます。</p>
<p ng-show="false">私は見えません。</p>
</div>
試してみる »
ng-show ディレクティブは valueの値に基づいて HTML 要素を表示（非表示）します。
式を使用してブール値（true または false）を計算できます:
 |
次の章では、ボタンをクリックして HTML 要素を非表示にする例をさらに紹介します。 |
|---|
ng-hide ディレクティブ
ng-hideディレクティブは HTML 要素を非表示または表示するために使用されます。
AngularJS 例
<div ng-app="">
<p ng-hide="true">私は見えません。</p>
<p ng-hide="false">私は見えます。</p>
</div>
<p ng-hide="true">私は見えません。</p>
<p ng-hide="false">私は見えます。</p>
</div>
試してみる »