AngularJSフォーム
AngularJSフォームは、入力コントロールのコレクションです。
HTMLコントロール
次のHTML入力要素は、HTMLコントロールと呼ばれます。
入力要素
要素を選択します
ボタン要素
Textarea要素
HTMLフォーム
HTMLフォームは通常、HTMLコントロールと同時に存在します。
AngularJSフォームインスタンス
ファーストネーム:
苗字:
form = {"FirstName": "John"、 "lastName": "doe"}
Master = {"FirstName": "John"、 "lastName": "doe"}
アプリケーションコード:
<!doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> NOVALIDATE>名:<br> <入力タイプ= "テキスト" ng-model = "user.firstname"> <br>姓:<br> <入力タイプ= "ng-model =" user.lastname "> <br> <br> <button ng-click =" reset() "> reset </button> <p> <p> <p> <p> <p> {{master}} </p> </div> <script> var app = angular.module( 'myApp'、[]); app.controller( 'formctrl'、function($ scope){$ scope.master = {firstName: "john"、lastName: "doe"}; angular.copy($ scope.master);実行結果:
ファーストネーム:
苗字:
form = {"FirstName": "John"、 "lastName": "doe"}
Master = {"FirstName": "John"、 "lastName": "doe"}
注:Novalidateプロパティは、HTML5に新たに追加されています。ブラウザを使用したデフォルト検証を無効にしました。
例分析
NG-APP指令は、AngularJSアプリケーションを定義します。
NG-Controllerディレクティブは、アプリケーションコントローラーを定義します。
NG-Modelディレクティブは、2つの入力要素をモデルのユーザーオブジェクトにバインドします。
formctrl関数は、マスターオブジェクトの初期値を設定し、reset()メソッドを定義します。
reset()メソッドは、ユーザーオブジェクトをマスターオブジェクトに等しく設定します。
NGクリックディレクティブはRESET()メソッドを呼び出し、ボタンがクリックされたときに呼び出されます。
アプリケーションでは、Novalidateプロパティは必要ありませんが、標準のHTML5検証をオーバーライドするには、AngularJSフォームで使用する必要があります。
上記は、Angularjsフォームの素材の編集であり、後で追加し続けます。プログラミングを手伝うことができる学生を願っています。