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

简介：通常，许多网站提供相关的信息，并且还提供支持性提交按钮(例如一个或多个)，以进一步进行操作。
例如，

• 用户将被要求填写表格，并且在提交按钮的形式中有一些选项，例如“提交表格”，“清除字段”甚至“链接到相似页面”等。
• 在任何网站的首页上，我们都可以看到“通过电子邮件注册”，“登录”，“通过Google登录”，“通过Facebook登录”等信息，

每个提交者的处理方式都必须使其各自采取行动。在本文中，让我们通过以下示例看看如何通过AngularJS做到这一点。

ng控件说明：

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

优点是控制器从未在UI中伸出手，没有JQuery选择器，没有涉及到findElementById等。在更新控制器中的模型字段时，UI会更新，最新的值也可以用一种不错的AngularJS方式获取。

实施代码：

HTML

  

    UserName :
    
    
    
    Password :
    
    
    
    
        Clear Values
    
  
    
        Submit
    
  
    
    
  
    
        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);
                };
            }]);
    

  

输出：

单击“清除值”后，将看到输出，如图所示

clearfields->单击“清除值”时，将清除输入的值

单击“提交”后，将看到输出，如图所示

提交→单击提交按钮时

示例2：在下面的示例中，通过两个不同的表单和两个提交按钮进行了多个提交。即使用“ ng-submit”代替按钮控件。

在第一种形式中，用户名和密码直接在控制器上，而在第二种形式中，它们绑定到控制器中的用户对象。因此，在提交表单时，输出代码略有不同。即对于第二种形式，我们可以直接以self.user身份访问，因为对于第二种形式，我们的ng模型是mainctrl.user.username和mainctrl.user.password。

因此，在进行form2提交期间，我们可以将其作为self.user获取。无论哪种方式，我们都可以选择。但是，如果我们绑定到一个对象，则可以通过该对象轻松访问表单的所有内容。

的HTML

  

  
    
        
        
        
    
  
    
        
        
        
    
  
    
    
  
    
        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);
                };
            }]);
    

  

输出：

• 单击“ Form 1 Submit”后，输出显示为

FirstForm提交→单击“ Form1提交”按钮时

• 单击“ Form 2 Submit”后，输出显示为

SecondForm提交→单击“ Form2提交”时

在验证两个表单提交的输出时，表单2提交提供了一种访问模型对象的简便方法。

结论： AngularJS非常易于使用，并且提供了MVC框架，HTML简洁的用户界面，双向绑定等，根据需求，我们可以轻松地处理不同提交按钮的事件并相应地转移流程。