AngularJS HTML DOM
AngularJSは、HTML DOM要素のプロパティのアプリケーションデータをバインドする命令を提供します。
ng-disabledコマンド
Ng-Disabledディレクティブは、アプリケーションデータをHTMLの無効属性に直接バインドします。
AngularJSインスタンス
<!doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </scrip> </head> <body ng-disabled = "myswitch">私をクリックしてください!</button> </p> <p> <入力タイプ= "ng-model =" myswitch "/> button </p> <p> {{myswitch}} </p> </div> </body> </html>ランニング効果:
ボタン
真実
例説明:
NG障害のあるディレクティブは、アプリケーションデータ「MySwitch」をHTMLの障害者プロパティにバインドします。
NG-Modelディレクティブは、HTML入力チェックボックス要素のコンテンツ(値)に「MySwitch」をバインドします。
myswitchが真の場合、ボタンは使用できません。
<p> <ボタン無効>私をクリックしてください! </button> </p>
myswitchがfalseの場合、ボタンが利用可能です。
<p> <butth>私をクリックしてください!</button> </p>
ng-showコマンド
NG-Showディレクティブは、HTML要素を隠すか表示します。
AngularJSインスタンス
<!Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </scrip> </head> </p> <p ng-show = "false">私は見えません。 </p> </div> </body> </html>
ランニング効果:
私は見える。
NG-Showディレクティブは、値の値に基づいてHTML要素を表示(隠します)。
式を使用して、ブール値(TrueまたはFalse)を計算できます。
AngularJSインスタンス
<!Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </scrip> </head> <body> <div ng-app ">" ng-show = "hour> 12">私は表示されます。 </p> </div> </body> </html>
実行結果:
私は見える。
次の章では、ボタンをクリックしてHTML要素を隠すためのより多くの例を提供します。
ng-hideコマンド
ng-hideディレクティブは、HTML要素を非表示または表示するために使用されます。
AngularJSインスタンス
<!Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </scrip> </head> <bodis = ""> <prut = ""> </p> <p ng-hide = "false">私は見える。 </p> </div> </body> </html>
実行結果:
私は見える。
上記は、AngularJS HTML DOM材料の編集です。後で追加し続けます。 Angularjsをプログラムするのを手伝うことができる友人を願っています。