如何使用Angular JS处理表单中的多个提交按钮？

I'm using AngularJS and I have a form where the user can enter data. At the end of the form I want to have two buttons, one to "save" which will save and go to another page, and another button labeled "save and add another" which will save the form and then reset it - allowing them to enter another entry.

我正在使用AngularJS，我有一个用户可以输入数据的表单。在表单的最后，我想要有两个按钮，一个用于“保存”，它将保存并转到另一个页面，另一个按钮标记为“保存并添加另一个”，这将保存表单然后重置它 - 允许它们输入另一个条目。

How do I accomplish this in angular? I was thinking I could have two submit buttons with ng-click tags, but I'm using ng-submit on the form element. Is there any reason I NEED to be using ng-submit - I can't remember why I started using that instead of ng-click on the button.

如何以角度完成此操作？我以为我可以有两个带有ng-click标签的提交按钮，但我在表单元素上使用ng-submit。有什么理由我需要使用ng-submit - 我不记得为什么我开始使用它而不是按下按钮。

The code looks something like:

代码看起来像：

<div ng-controller="SomeController">
    <form ng-submit="save(record)">
        <input type="text" name="shoppingListItem" ng-model="record.shoppingListItem">
        <button type="submit">Save</button>
        <button type="submit">Save and Add Another</button>
    </form>
</div>

And in the controller SomeController

并在控制器SomeController中

$scope.record = {};
$scope.save = function (record) {
    $http.post('/api/save', record).
        success(function(data) {
            // take action based off which submit button pressed
        });
}

6 个解决方案

#1

ngSubmit allows you to press Enter while typing on the textbox to submit. If that behavior isn't important, just use 2 ngClick. If it is important, you can modify the second button to use ngClick. So your code becomes:

ngSubmit允许您在文本框中键入时按Enter键以进行提交。如果这种行为不重要，只需使用2 ngClick。如果这很重要，您可以修改第二个按钮以使用ngClick。所以你的代码变成：

<div ng-controller="SomeController">
    <form ng-submit="save(record)">
        <input type="text" name="shoppingListItem" ng-model="record.shoppingListItem">
        <button type="submit">Save</button>
        <button ng-click="saveAndAdd(record)">Save and Add Another</button>
    </form>
</div>

#2

You can keep both ng-click and type="submit". In the ng-click you can just update a parameter of your controller and validate that in the event ng-submit:

你可以保持ng-click和type =“submit”。在ng-click中，您只需更新控制器的参数并在ng-submit事件中验证：

<div ng-controller="SomeController">
<form ng-submit="save(record)">
    <input type="text" name="shoppingListItem" ng-model="record.shoppingListItem">
    <button type="submit">Save</button>
    <button type="submit" ng-click="SaveAndAddClick=true">Save and Add Another</button>
</form>

So this approach avoids you from adding a method and then calling a redundant code.

因此，这种方法可以避免添加方法然后调用冗余代码。

Thanks

谢谢

#3

Make them all buttons and type=submit. It makes it a little cleaner not mixing and matching inputs and buttons. So basically you're trying to execute one method in your controller to handle either button click.

将它们全部设为按钮并输入= submit。它使得更清洁，不混合和匹配输入和按钮。所以基本上你试图在你的控制器中执行一个方法来处理任一按钮点击。

<div ng-controller="SomeController as sc">
        <form ng-submit="sc.execute(record)">
            <input type="text" name="shoppingListItem" ng-model="record.shoppingListItem">
            <button type="submit" ng-model="sc.saveButtonVal" ng-click="sc.saveButtonVal=true>Save</button>
            <button type="submit" ng-model="sc.saveAndAddButtonVal" ng-click="sc.saveAndAddButtonVal=true">Save and Add Another</button>
        </form>
</div>

So, in your js file you'll have something like this.

所以，在你的js文件中你会有这样的东西。

function SomeController() {
        var sc = this;

        sc.execute = function(record) {
            //initialize the vars
            sc.saveButtonVal = false;
            sc.saveAndAddButtonVal = false;

            sc.resetButtonValues = function() {
                sc.saveButtonVal = false;
                sc.saveAndAddButtonVal = false;
            };

            if (sc.saveButtonVale) {
                //do save only operation
            } else if (sc.saveAndAddButtonVal) {
                //do save and add op
            }

           // reset your button vals
           sc.resetButtonValues();
    }
}

#4

As I see it, you have two options: 1: Use an ngClick event on the "save and add another" button and remove the "type='submit'" portion. Then in whatever function you call gor the ngClick, you can save and then reset the values, calling save() within that function. 2: Remove the ngSubmit altogether and just use ngClicks for both buttons.

在我看来，你有两个选择：1：在“保存并添加另一个”按钮上使用ngClick事件并删除“type ='submit'”部分。然后在你调用ngClick的任何函数中，你可以保存然后重置值，在该函数中调用save（）。 2：完全删除ngSubmit，只需对两个按钮使用ngClicks。

#5

ng-submit has other advantages too. For example, invalid form will not be submitted. It is always better to use ng-submit instead of ng-click. However, in your scenario, better approach would be

ng-submit也有其他优点。例如，将无法提交无效表单。使用ng-submit而不是ng-click总是更好。但是，在您的方案中，更好的方法是

1. use ng-click on buttons.
2. 使用ng-单击按钮。
3. validate form in controller. Keep in mind that ng-click will submit the form even if it is not valid.
4. 验证控制器中的表单。请记住，即使无效，ng-click也会提交表单。
5. call two different $scope.functions on two different ng-click in the somecontroller.
6. 在somecontroller中的两个不同的ng-click上调用两个不同的$ scope.functions。

Hope it helps.

希望能帮助到你。

#6

Remove ng-submit from "form" element and define ng-click functions separately on each button with type 'submit'.For invalidation check, define name property in form element tag. And check validation in scope function.

从“form”元素中删除ng-submit并在每个按钮上单独定义ng-click函数，类型为“submit”。对于无效检查，在表单元素标记中定义name属性。并检查范围函数中的验证。

<div ng-controller="SomeController">
<form name="saveForm">
    <input type="text" name="shoppingListItem" ng-model="record.shoppingListItem">
    <button type="submit" ng-click="save(record)">Save</button>
    <button type="submit" ng-click="saveOther(record)">Save and Add Another</button>
</form>

Scope Function:

范围功能：

$scope.record = {};

$scope.save = function (record) {    

if(this.saveForm.$valid)
  {

    $http.post('/api/save', record).
    success(function(data) {
        // take action based off which submit button pressed
    });
  }
}