AngularJS ng-submit とフォーム送信の例

AngularJS ng-submit ディレクティブ

この NG-送信 AngularJS のディレクティブは、アプリケーションをブラウザーの送信イベントにバインドするために使用されます。 したがって、次の場合 AngularJS submit イベントでは、コントローラー自体内で何らかの処理を実行し、処理された情報をユーザーに表示できます。

ng-submit を使用して AngularJS でフォ​​ームを送信する方法

Web ページ上で情報を送信するプロセスは、通常、Web ブラウザーの送信イベントによって処理されます。 このイベントは通常、ログイン認証情報やフォーム データなどのさらなる処理のために、ユーザーが Web ページに入力した情報をサーバーに送信するために使用されます。情報の送信は、GET または POST リクエストを通じて実行できます。

Angular フォーム送信の例を使用して、AngularJS でフォ​​ームを送信する方法を見てみましょう。

AngularJS フォーム送信の例では、ユーザーが学習したいトピックを入力できるテキスト ボックスを表示します。ページには送信ボタンがあり、このボタンを押すとトピックが順序なしリストに追加されます。

ng-submit を使用して AngularJS でフォ​​ームを送信する
ng-submit を使用して 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()">
        &nbsp;&nbsp;&nbsp;
        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>

コードの説明:

  1. まず、Angular フォーム送信イベントの例に示されているように、「テキスト ボックス」と「送信ボタン」コントロールを保持するフォーム HTML タグを宣言します。次に、ngsubmit Angular ディレクティブを使用して、関数「Display()」をフォームにバインドします。この関数はコントローラーで定義され、フォームが送信されると呼び出されます。
  2. ユーザーが学びたいトピックを入力するテキスト コントロールがあります。 これは、コントローラーで使用される「Topic」という変数にバインドされます。
  3. AngularJS には通常の送信ボタンがあり、ユーザーが必要なトピックを入力したときにクリックします。
  4. 私たちは NGリピート ユーザーが入力したトピックのリスト項目を表示するディレクティブ。 ng-repeat ディレクティブは、配列「AllTopic」内の各トピックを調べて、それに応じてトピック名を表示します。
  5. コントローラーでは、「AllTopic」という配列変数を宣言しています。 これは、ステップ 2 でユーザーが入力したすべてのトピックを保持するために使用されます。
  6. ユーザーが「送信」ボタンをクリックするたびに呼び出される Display() 関数のコードを定義しています。 ここでは、プッシュ配列関数を使用して、変数「Topic」を介してユーザーが入力したトピックを配列「AllTopic」に追加しています。

AngularJS フォームのサンプル コードが正常に実行されると、ブラウザーでコードを実行すると次の出力が表示されます。
出力:

AngularJS でフォ​​ームを送信する

コードが動作することを確認するには、まず、上記のようにテキスト ボックスに「Angular」などのトピック名を入力し、[送信] ボタンをクリックします。

AngularJS でフォ​​ームを送信する

  • 送信ボタンをクリックすると、テキストボックスに入力された項目が項目リストに追加されます。
  • これは、送信ボタンが押されたときに呼び出される Display() 関数によって実現されます。
  • Display() 関数は、「AllTopic」という配列変数にテキストを追加します。 そして、ng-repeat ディレクティブは、配列変数 'AllTopic' 内の各値を調べて、それに応じてリスト項目として表示します。

まとめ

  • 「ng-submit」ディレクティブは、AngularJS でフォ​​ーム送信のためにユーザーが入力した入力を処理するために使用されます。
  • Web ページ上で情報を送信するプロセスは、通常、Web ブラウザーの送信イベントによって処理されます。
  • 情報の送信は、GET または POST リクエストを通じて行うことができます。
  • Display() 関数は、「AllTopic」という配列変数にテキストを追加します。