AngularJSイベント2024 年の最新の入門チュートリアル。このコースでは NG-クリックコマンド,AngularJS例,HTML要素を隠します,AngularJS例,ディスプレイのHTML要素,AngularJS例, について学習できます。
AngularJSイベント
AngularJS HTMLイベントは、独自の命令を有しています。
NG-クリックコマンド
NG-クリックディレクティブはAngularJSがイベントをクリック定義します。
AngularJS例
<DIV ngのアプリ= "" NG-コントローラ= "myCtrl">
<ボタンngのクリック= "カウント =カウント+ 1">私がポイント! </ボタン>
<P> {{数}} </ P>
</ DIV>
»をお試しください
HTML要素を隠します
ngの非表示ディレクティブは、アプリケーションの一部が表示されている設定します。
NG-隠す= "true"を設定するHTML要素は表示されません。
NG-隠す= "false"を設定するHTML要素が表示されます。
AngularJS例
<DIV ngのアプリ= "て、myApp " NG-コントローラ= "personCtrl">
<ボタンngのクリック= "トグル ()" >>表示/非表示</ button>の
<P NG-隠す= "myVarを ">
名前:の<input type = "text" NG-モデル= "firstNameの"> <BR>
名前:の<input type = "text" NG-モデル= "lastNameの"> <BR>
<BR>
フルネーム:{{firstNameの+ " " + lastNameの}}
</ P>
</ DIV>
<スクリプト>
VARアプリ= angular.module( 'て、myApp'、[]);
app.controller( 'personCtrl'、関数($スコープ){
$ Scope.firstName = "ジョン"、
$ Scope.lastName = "ドウ"
$ Scope.myVar = falseは、
$ Scope.toggle =関数(){
!$ Scope.myVar = $ scope.myVar。
};
});
</スクリプト>
»をお試しください アプリケーション分析:
同様の第1の部分personControllerコントローラー部。
アプリケーションは、デフォルトの属性を持つ:$ scope.myVar = falseは、
ngの非表示の命令セット<p>要素2つの入力フィールドがmyVarを (trueまたはfalse)セットの値に応じて、表示されて表示されます。
トグル()関数は、myVarを変数 (真と偽)の値を切り換えるために使用されます。
その要素が表示されていないので、= "true"を非表示ngの 。
ディスプレイのHTML要素
NG-表示命令は、 可視のアプリケーション部分かどうかを設定するために使用することができます。
NG-ショー= "false"をあなたが設定できるHTMLエレメントは表示されません。
NG-ショー= "true"を HTML要素が表示されて設定することができます。
次の例は、NG-showコマンドを使用しています。
AngularJS例
<DIV ngのアプリ= "て、myApp " NG-コントローラ= "personCtrl">
<ボタンngのクリック= "トグル ()">表示/非表示</ button>の
<P NG-ショー= "myVarを ">
名前:の<input type = "text" NG-モデル= "firstNameの"> <BR>
姓:の<input type = "text" NG-モデル= "lastNameの"> <BR>
<BR>
名前:{{firstNameの+ "" + lastNameの}}
</ P>
</ DIV>
<スクリプト>
VARアプリ= angular.module( 'て、myApp'、[]);
app.controller( 'personCtrl'、関数($スコープ){
$ Scope.firstName = "ジョン"、
$ Scope.lastName = "ドウ"
$ Scope.myVar =はtrue。
$ Scope.toggle =関数(){
!$ Scope.myVar = $ scope.myVar。
}
});
</スクリプト>
»をお試しください