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

我使用的是AngularJS，我有一个表单，用户可以在其中输入数据。在表单的末尾，我希望有两个按钮，一个是“保存”按钮，它将保存并转到另一个页面，另一个是标记为“保存并添加另一个”的按钮，它将保存表单，然后重置它-允许他们输入另一个条目

我怎样才能做到这一点呢？我想我可以有两个带有ng click标记的submit按钮，但是我在表单元素上使用了ng submit。是否有任何理由我需要使用ng submit？我不记得为什么我开始使用它而不是ng单击按钮

代码如下所示：

<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>

---

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

---

2：完全删除ngSubmit，只需对两个按钮使用ngClicks

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>

拯救
保存并添加另一个

您可以同时单击

ng和
type=“submit”
。在
ng中单击
，您只需更新控制器的一个参数，并在
ng提交
事件中验证：

<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>


拯救
保存并添加另一个


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

谢谢
ng提交还有其他好处。例如，将不提交无效表单。最好使用ng提交而不是ng单击。然而，在您的场景中，更好的方法是

使用ng单击按钮
在控制器中验证表单。请记住，即使表单无效，ng click也会提交表单
在somecontroller中的两个不同ng上调用两个不同的$scope.functions
希望能有帮助
 使它们成为所有按钮和
type=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>

从“form”元素中删除ng submit，并在每个按钮上分别定义ng click函数，类型为“submit”。对于无效检查，请在form元素标记中定义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>

如果有人想要一个简单的方法，那么只需创建一个标志并在按钮和提交之间切换

<button type="{{isButton == true ? 'button' : 'submit'}}" >Save</button>
<button type="{{!isButton == true ? 'button' : 'submit'}}" >Update</button>

保存
更新

需要根据用户操作来处理标志。
是的，这就是我所认为的解决方案，但是是否有理由在表单标签中使用ng submit？比如，它提供了什么？是为了验证还是什么？我不记得为什么我用它来代替ng-click。是的。ng click将绕过html5验证。如果这不重要，那么任何一种方法都可以。ngSubmit仅在您希望输入提交行为（或者如果您有许多提交按钮，与您的场景不同，所有按钮都具有相同的行为）时才有用。第二个按钮不是普通按钮，因为按钮默认为type=“submit”，您需要添加type=“button”，否则它将同时运行提交操作和ng click操作。在我最喜欢的浏览器中，按钮的默认类型是submit，但后来我自己仔细检查了一下，这个消息来源说不同的浏览器可能有不同的默认类型。这种方法不是最具语义的解决方案。最好使用两个type=“submit”按钮，然后使用带有赋值的ng单击来设置范围变量，然后在控制器中打开。这样默认的事件模型仍然适用。这是可行的，但请注意，如果使用
$location.path（'same/path/as/before/details'）
，则不会刷新当前页面。如果您使用的是
angular ui router
或
$route.reload（）
如果您使用的是默认的angularjs路由器，请使用类似
$state.reload（）
的方法。您没有考虑angularjs验证。使用ng提交将导致表单提交，这对验证至关重要。说输入按钮的行为很重要是不对的。哇，我得试试。谢谢你有趣的方法！我正在使用它，但在我的情况下，它是首先完成ng提交功能，然后可能在ng click中执行分配。这是正确的还是我犯了一些错误？
保存并添加另一个
，这样它会工作得很好。问题是代码的执行。它从左边开始，然后向右移动，所以任何先到的都会被执行。
<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.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
    });
  }
}

<button type="{{isButton == true ? 'button' : 'submit'}}" >Save</button>
<button type="{{!isButton == true ? 'button' : 'submit'}}" >Update</button>