AngularJS ng-submit 表单提交示例

AngularJS ng-submit 指令

波长 XNUMXμm 的提交 AngularJS 中的指令用于将应用程序绑定到浏览器的提交事件。因此，在 AngularJS 在提交事件中，您可以在控制器本身内部执行一些处理，然后将处理后的信息显示给用户。

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

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

让我们以 Angular 表单提交示例来了解如何在 AngularJS 中提交表单。

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

AngularJS 表单提交示例

现在，我们将看到一个使用 ng-submit 指令从 Controller 提交 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-重复指令显示用户输入的主题列表项。ng-repeat 指令遍历数组“AllTopic”中的每个主题并相应地显示主题名称。
在我们的控制器中，我们声明了一个名为“AllTopic”的数组变量。这将用于保存用户在步骤 2 中输入的所有主题。
我们正在定义 Display() 函数的代码，该函数将在用户单击“提交”按钮时被调用。在这里，我们使用推送数组函数将用户通过变量“Topic”输入的主题添加到我们的数组“AllTopic”中。

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

要查看代码运行，首先在文本框中输入主题名称（如上所示），然后单击“提交”按钮。

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

总结

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

AngularJS ng-submit 指令

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

AngularJS 表单提交示例

总结

注册简报