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()">
        &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>

コードの説明：

まず、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」という配列変数にテキストを追加します。

よろしければ：

AngularJS ng-submit ディレクティブ

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

AngularJS フォームの送信例

まとめ

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