AngularJS ng-submit 带表单提交示例

AngularJS ng-submit 指令

AngularJS 中的 ng-submit 指令用于将应用程序绑定到浏览器的提交事件。因此，在 AngularJS 的提交事件中，您可以直接在控制器中执行一些处理，然后将处理后的信息显示给用户。

如何在 AngularJS 中使用 ng-submit 提交表单

通常，在网页上提交信息的过程由 Web 浏览器的提交事件处理。此事件通常用于将用户在网页上输入的信息发送到服务器进行进一步处理，例如登录凭据、表单数据等。可以通过 GET 或 POST 请求提交信息。

让我们以一个 Angular 表单提交示例来看看如何在 AngularJS 中提交表单。

在我们的 AngularJS 表单提交示例中，我们将向用户展示一个文本框，用户可以在其中输入他们想学习的主题。页面上会有一个提交按钮，当按下该按钮时，主题将被添加到无序列表中。

Submit a Form in AngularJS using ng-submit — 使用 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>

代码解释

我们首先声明我们的表单 HTML 标签，其中将包含“文本框”和“提交按钮”控件，如 Angular 表单提交事件示例所示。然后，我们使用 ngsubmit Angular 指令将函数“Display()”绑定到我们的表单。此函数将在我们的控制器中定义，并在表单提交时调用。
我们有一个文本控件，用户将在其中输入他们想学习的主题。这将被绑定到一个名为“Topic”的变量，该变量将在我们的控制器中使用。
AngularJS 中有普通的提交按钮，用户在输入他们想要的主题后会点击它。
我们使用了 ng-repeat 指令来显示用户输入的主题列表项。ng-repeat 指令遍历“AllTopic”数组中的每个主题，并相应地显示主题名称。
在我们的控制器中，我们声明了一个名为“AllTopic”的数组变量。这将用于存储用户在第 2 步输入的所有主题。
我们正在定义 Display() 函数的代码，该函数将在用户单击提交按钮时调用。在这里，我们使用 push 数组函数将用户通过变量“Topic”输入的主题添加到我们的数组“AllTopic”中。

如果 AngularJS 表单示例代码执行成功，当您在浏览器中运行代码时，将显示以下输出。
输出

要查看代码工作原理，首先在文本框中输入一个主题名称，例如“Angular”（如上所示），然后单击“提交”按钮。

单击提交按钮后，您将看到在文本框中输入的内容已添加到项目列表中。
这是由 Display() 函数实现的，该函数在按下提交按钮时调用。
Display() 函数将文本添加到名为“AllTopic”的数组变量中。我们的 ng-repeat 指令遍历“AllTopic”数组变量中的每个值，并相应地将它们显示为列表项。

摘要

“ng-submit”指令用于处理 AngularJS 中表单提交的用户输入。
通常，在网页上提交信息的过程由 Web 浏览器的提交事件处理。
可以通过 GET 或 POST 请求提交信息。
Display() 函数将文本添加到名为“AllTopic”的数组变量中。

AngularJS ng-submit 指令

如何在 AngularJS 中使用 ng-submit 提交表单

AngularJS 表单提交示例

摘要

订阅新闻通讯