AngularJSフォーム2024 年の最新の入門チュートリアル。このコースでは HTMLコントロール,HTMLフォーム,AngularJSフォームインスタンス,応用コード,分析の例, について学習できます。
AngularJSフォーム
AngularJSは、入力コントロールのコレクションを形成します。
HTMLコントロール
次のHTML入力要素は、HTMLコントロールと呼ばれています:
- 入力素子
- 要素を選択
- ボタン要素
- textarea要素
HTMLフォーム
HTMLコントロールとHTMLフォームは、しばしば共存します。
AngularJSフォームインスタンス
フォーム= {{ユーザー}}
マスター= {{マスター}}
応用コード
<DIV ngのアプリ= "て、myApp " NG-コントローラ= "formCtrl">
<フォーム NOVALIDATE>
ファーストネーム:<BR>
<input type = "text" NG -model = "user.firstName"> <BR>
姓 :<BR>
<input type = "text" NG -model = "user.lastName">
<br>ログイン
<ボタンngのクリック= "リセット ()"> RESET </ button>の
</フォーム>
<P>フォーム= {{{ユーザー}} </ P>
<P>マスター= {{{マスター}} </ P>
</ DIV>
<スクリプト>
VARアプリ= angular.module( 'て、myApp'、[]);
app.controller( 'formCtrl'、関数($スコープ){
$ Scope.master = {firstNameの "ジョン"、lastNameの "ドウ"};
$ Scope.reset =関数(){
$ Scope.user = angular.copy($のscope.master)。
};
$ Scope.reset();
});
</スクリプト>
»をお試しください | NOVALIDATE属性がでHTML5の新機能です。 デフォルトの認証は、ブラウザを使用して無効にします。 |
---|
分析の例
NG-アプリディレクティブはAngularJSアプリケーションを定義します。
NG-コントローラディレクティブは、アプリケーションのコントローラを定義します。
NG-モデルディレクティブは、 ユーザーオブジェクトモデルへの2つの入力要素をバインドします。
formCtrl機能は、 マスターオブジェクトの初期値を設定し、reset()メソッドを定義します。
リセット()メソッドは、 ユーザーオブジェクトがマスター・オブジェクトに等しい設定します。
コマンドと呼ばれるreset()メソッドをngがクリックし 、通話ボタンをクリックします。
アプリケーション内NOVALIDATEプロパティは必要ありませんが、標準のHTML5の検証を書き換えるため、AngularJSフォームを使用する必要があります。