AngularJS HTML HOME
AngularJSには、アプリケーションデータをHTMLDOM要素の属性にバインドするためのディレクティブがあります。
ng-disabledディレクティブ
ng-disabledディレクティブは、AngularJSアプリケーションデータをHTML要素のdisabled属性にバインドします。
AngularJSの例
<div ng-app="" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">Click Me!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch">Button
</p>
<p>
{{ mySwitch }}
</p>
</div>
アプリケーションの説明：
ng-disabledディレクティブは、アプリケーションデータmySwitchをHTMLボタンのdisabled属性にバインドします。
ng-modelディレクティブは 、HTMLチェックボックス要素の値をmySwitchの値にバインドします。
mySwitchの値がtrueと評価された場合、ボタンは無効になります。
<p>
<button disabled>Click Me!</button>
</p>
mySwitchの値がfalseと評価された場合、ボタンは無効になりません。
<p>
<button>Click Me!</button>
</p>
ng-showディレクティブ
ng-showディレクティブは、HTML要素を表示または非表示にします。
AngularJSの例
<div ng-app="">
<p ng-show="true">I am visible.</p>
<p ng-show="false">I am not visible.</p>
</div>
ng-showディレクティブは、ng-showの値に基づいてHTML要素を表示（または非表示）します。
trueまたはfalseと評価される任意の式を使用できます。
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">I am
not visible.</p>
<p ng-hide="false">I am visible.</p>
</div>