如何使用AngularJS分配和读取两个不同提交按钮的值

在这篇文章中，我们将看到如何在AngularJS中分配和读取两个不同的提交按钮的值。通常情况下，许多网站提供相关种类的信息，也支持像一个或一个以上的提交按钮，以进一步进行。
例如,

用户将被要求填写表格，并有提交按钮形式的选项，如 “提交表格”、”清除字段 “甚至是 “类似页面的链接 “等等。
在任何网站的主要开放页面，我们可以看到 “用电子邮件注册”、”登录”、”通过谷歌登录”、”通过Facebook登录 “等。

每一次提交都需要以这样的方式来处理，他们需要做各自的动作。在这篇文章中，让我们通过下面的例子来看看我们如何通过AngularJS做到这一点。

对Ng控制的解释：

ng-app 。我们的根元素，它被命名为一个简单的应用程序。
ng-controller : 定义了应用程序控制器。这里 “MainCtrl “是一个JavaScript函数，它将帮助我们以我们喜欢的方式处理多个提交按钮。
我们定义了一个控制器，它的实例上有一个名为用户名和密码的变量。
我们把ng-model的值指向MainCtrl上的同一个用户名变量。
因此，输入框中的任何变化都会更新我们控制器中的模型。
当控制器中的变量值发生变化时，输入字段的值会自动更新。
我们可以清楚地看到，代码没有使用任何ID或CSS，因为这个ng-model，值被自动更新。
ng-click -> 在按钮点击时需要执行动作。
写了两个独立的函数，一个用于清除数值，另一个用于提交。因此，通过这些不同的函数实现了清洁分离。像这样，可以编写 “n “个函数，并根据要求转移功能。

这样做的好处是，控制器从来没有接触过用户界面，没有JQuery选择器，没有findElementById等参与。在控制器中更新模型字段时，UI会被更新，最新的值也能以AngularJS的方式被抓取。

实例1：本实例描述了AngularJS中两个不同的提交按钮的赋值和读值。

<!DOCTYPE html>
<html ng-app="simpleapp">
  
<head>
  <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js">
  </script>
</head>
  
<body style="text-align: center;" 
      ng-controller="MainCtrl as mainctrl">
  <h1 style="color: green;">GeeksforGeeks</h1>
  <h3>
    Assign and read values of two different
    submit buttons using AngularJS
  </h3><br>
  UserName :
  <input type="text" ng-model="mainctrl.username">
  <br><br>
  Password :
  <input type="password" ng-model="mainctrl.password">
  <br><br>
  <button ng-click="mainctrl.clear()">
    Clear Values
  </button>
  <button ng-click="mainctrl.submit()">
    Submit
  </button>
  
  <script type="text/javascript">
    angular.module('simpleapp', [])
      .controller('MainCtrl', [function () {
        var self = this;
        self.clear = function () {
  
          // Clearing fields, given
          // as empty values
          self.username = '';
          self.password = '';
  
        };
        self.submit = function () {
          console.log('YOUR INFORMATION: ',
            self.username, self.password);
        };
      }]);
  </script>
</body>
</html>

输出：在点击 “清除数值 “和点击 “提交 “按钮时，可以看到输出。

如何使用AngularJS分配和读取两个不同提交按钮的值？

例子2：在下面的例子中，多个提交是通过两个不同的表单和两个提交按钮发生的，即使用 “ng-submit “而不是按钮控件。

在第一个表单中，用户名和密码直接在控制器中，而在第二个表单中，它们被绑定到控制器中的用户对象。因此，在提交表单时，输出代码有一点不同。即对于第二个表单，我们可以直接作为self.user访问，因为对于第二个表单，我们的ng-model是mainctrl.user.username和mainctrl.user.password。

所以，在form2的提交过程中，我们可以把值作为self.user来获取。在这两种方式中，我们都可以选择。但是如果我们被绑定到一个对象上，那么表单的所有内容都可以通过该对象轻松访问。

<!DOCTYPE html>
<html ng-app="multiformapp">
  
<head>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js">
    </script>
</head>
  
<body style="text-align: center;"
      ng-controller="MainCtrl as mainctrl">
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h3>
        Assign and read values of two different
        submit buttons using AngularJS
    </h3>
    <form ng-submit="mainctrl.form1submit()">
        <input type="text" ng-model="mainctrl.username">
        <input type="password" ng-model="mainctrl.password">
        <input type="submit" value="Form 1 Submit">
    </form>
    <form ng-submit="mainctrl.form2submit()">
        <input type="text" ng-model="mainctrl.user.username">
        <input type="password" ng-model="mainctrl.user.password">
        <input type="submit" value="Form 2 Submit">
    </form>
  
    <script type="text/javascript">
        angular.module('multiformapp', [])
            .controller('MainCtrl', [function () {
                var self = this;
                self.form1submit = function () {
  
                    // Create user object to send
                    // to the server
                    var user = {
                        username: self.username,
                        password: self.password
                    };
  
                    console.log('First form information ',
                        self.username, self.password);
                };
                self.form2submit = function () {
                    console.log('Second form information ',
                        self.user);
                };
            }]);
    </script>
</body>
</html>

输出:

如何使用AngularJS分配和读取两个不同提交按钮的值？