最新のWeb開発のチュートリアル
 

AngularJS HTML DOM


AngularJSは、HTML DOM要素の属性にアプリケーションデータを結合するための指示を有しています。


ngの禁止指令

NG-無効ディレクティブは、HTML要素のdisabled属性にAngularJSアプリケーションデータをバインドします。

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-無効ディレクティブは、HTMLボタンのdisabled属性にアプリケーションデータmySwitchをバインドます。

NG-モデルディレクティブmySwitchの値にHTMLチェックボックス要素の値をバインドします。

mySwitchの値がtrueと評価された場合、ボタンが無効になります。

<p>
<button disabled>Click Me!</button>
</p>

mySwitchの値がfalseと評価された場合、ボタンは無効になりません。

<p>
<button>Click Me!</button>
</p>

NG-ショー指令

NG-ショーディレクティブは、HTML要素を示しているか、非表示になります。

AngularJS例

<div ng-app="">

<p ng-show="true">I am visible.</p>

<p ng-show="false">I am not visible.</p>

</div>
»それを自分で試してみてください

NG-ショーディレクティブショー(または非表示)NG-ショーのに基づいて、HTML要素。

あなたは、trueまたはfalseに評価される任意の式を使用することができます。

AngularJS例

<div ng-app="" ng-init="hour=13">

<p ng-show="hour > 12">I am visible.</p>

</div>
»それを自分で試してみてください
注意 次の章では、より多くの例は、HTML要素を非表示にするボタンのクリックを使用して、そこにあります。

ngの非表示指令

ngの非表示ディレクティブは、HTML要素を表示、または非表示します。

AngularJS例

<div ng-app="">

<p ng-hide="true">I am not visible.</p>

<p ng-hide="false">I am visible.</p>

</div>
»それを自分で試してみてください