AngularJSイベント
AngularJS HTMLイベントは、独自の命令を有しています。
NG-クリックコマンド
NG-クリックディレクティブはAngularJSがイベントをクリック定義します。
AngularJS例
<DIV ngのアプリ= "" NG-コントローラ= "myCtrl">
<ボタンngのクリック= "カウント =カウント+ 1">私がポイント！ </ボタン>
<P> {{数}} </ P>
</ DIV>
<ボタン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。
};
}）;
</スクリプト>
<ボタン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。
}
}）;
</スクリプト>
<ボタン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。
}
}）;
</スクリプト>
»をお試しください