AngularJS ng-submit とフォーム送信の例
AngularJS ng-submit ディレクティブ
この NG-送信 AngularJS のディレクティブは、アプリケーションをブラウザーの送信イベントにバインドするために使用されます。 したがって、次の場合 AngularJS submit イベントでは、コントローラー自体内で何らかの処理を実行し、処理された情報をユーザーに表示できます。
ng-submit を使用して AngularJS でフォームを送信する方法
Web ページ上で情報を送信するプロセスは、通常、Web ブラウザーの送信イベントによって処理されます。 このイベントは通常、ログイン認証情報やフォーム データなどのさらなる処理のために、ユーザーが Web ページに入力した情報をサーバーに送信するために使用されます。情報の送信は、GET または POST リクエストを通じて実行できます。
Angular フォーム送信の例を使用して、AngularJS でフォームを送信する方法を見てみましょう。
AngularJS フォーム送信の例では、ユーザーが学習したいトピックを入力できるテキスト ボックスを表示します。ページには送信ボタンがあり、このボタンを押すとトピックが順序なしリストに追加されます。

AngularJS フォームの送信例
ここで、ng-submit ディレクティブを使用してコントローラーから AngularJS フォームを送信する例を見てみましょう。
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> </head> <body ng-app="sampleApp"> <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <script src="lib/bootstrap.js"></script> <script src="lib/bootstrap.css"></script> <h1> Guru99 Global Event</h1> <div ng-controller="AngularController"> <form ng-submit="Display()"> Enter which topic you would like to learn <input type="text" ng-app="sampleApp" ng-model="Topic"><br> <input type="submit" value="Submit"/> <ul ng-repeat="topicname in AllTopic"> <li>{{topicname}}</li> </ul> </form> </div> <script> var sampleApp = angular.module("sampleApp",[]); sampleApp.controller("AngularController",function($scope) { $scope.AllTopic=[]; $scope.Display = function () { $scope.AllTopic.push($scope.Topic); } }); </script> </body> </html>
コードの説明:
- まず、Angular フォーム送信イベントの例に示されているように、「テキスト ボックス」と「送信ボタン」コントロールを保持するフォーム HTML タグを宣言します。次に、ngsubmit Angular ディレクティブを使用して、関数「Display()」をフォームにバインドします。この関数はコントローラーで定義され、フォームが送信されると呼び出されます。
- ユーザーが学びたいトピックを入力するテキスト コントロールがあります。 これは、コントローラーで使用される「Topic」という変数にバインドされます。
- AngularJS には通常の送信ボタンがあり、ユーザーが必要なトピックを入力したときにクリックします。
- 私たちは NGリピート ユーザーが入力したトピックのリスト項目を表示するディレクティブ。 ng-repeat ディレクティブは、配列「AllTopic」内の各トピックを調べて、それに応じてトピック名を表示します。
- コントローラーでは、「AllTopic」という配列変数を宣言しています。 これは、ステップ 2 でユーザーが入力したすべてのトピックを保持するために使用されます。
- ユーザーが「送信」ボタンをクリックするたびに呼び出される Display() 関数のコードを定義しています。 ここでは、プッシュ配列関数を使用して、変数「Topic」を介してユーザーが入力したトピックを配列「AllTopic」に追加しています。
AngularJS フォームのサンプル コードが正常に実行されると、ブラウザーでコードを実行すると次の出力が表示されます。
出力:
コードが動作することを確認するには、まず、上記のようにテキスト ボックスに「Angular」などのトピック名を入力し、[送信] ボタンをクリックします。
- 送信ボタンをクリックすると、テキストボックスに入力された項目が項目リストに追加されます。
- これは、送信ボタンが押されたときに呼び出される Display() 関数によって実現されます。
- Display() 関数は、「AllTopic」という配列変数にテキストを追加します。 そして、ng-repeat ディレクティブは、配列変数 'AllTopic' 内の各値を調べて、それに応じてリスト項目として表示します。
まとめ
- 「ng-submit」ディレクティブは、AngularJS でフォーム送信のためにユーザーが入力した入力を処理するために使用されます。
- Web ページ上で情報を送信するプロセスは、通常、Web ブラウザーの送信イベントによって処理されます。
- 情報の送信は、GET または POST リクエストを通じて行うことができます。
- Display() 関数は、「AllTopic」という配列変数にテキストを追加します。