AngularJS HTML DOM

AngularJSはアプリケーションデータをHTML DOM要素の属性にバインドする指示を提供します。

ng-disabled 指示

ng-disabled 指示はAngularJSアプリケーションデータを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>

自分で試してみる

アプリケーション説明：

ng-disabled 指示はアプリケーションデータを mySwitch HTMLボタンの disabled 属性にバインドします。

ng-model 指示はHTMLチェックボックス要素の値を mySwitch の値に基づいて。

もし mySwitch の値は true、それではボタンは無効化されます：

<p>
<button disabled>クリックして！</button>
</p>

もし mySwitch の値は false、それではボタンは無効化されません：

<p>
<button>クリックして！</button>
</p>

ng-show 指示

ng-show 指示がHTML要素を表示または非表示にします。

AngularJS インスタンス

<div ng-app="">  
<p ng-show="true">私は見える。</p>  
<p ng-show="false">私は見えない。</p>  
</div>

自分で試してみる

ng-show 指令は ng-show の値HTML要素の表示（または非表示）

真または偽と評価されるどんな表現も使用できます：

AngularJS インスタンス

<div ng-app="" ng-init="hour=13">
<p ng-show="hour > 12">I am visible.</p>
</div>

自分で試してみる

次の章では、ボタンクリックを使用してHTML要素を非表示にする方法についてさらに例を提供します。

ng-hide 指令

ng-hide HTML要素を非表示にしたり表示にしたりする指令。

AngularJS インスタンス

<div ng-app="">  
<p ng-hide="true">私は見えない。</p>  
<p ng-hide="false">私は見える。</p>  
</div>

自分で試してみる