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

Question

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

我如何以 Angular 实现这一点？我想我可以有两个带有 ng-click 标签的提交按钮，但我在表单元素上使用 ng-submit。我有什么理由需要使用 ng-submit - 我不记得为什么我开始使用它而不是 ng-click 按钮。

代码看起来像:

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

并在 Controller 中SomeController

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

Answer 1

您可以同时保留 ng-click 和 type="submit"。在 ng-click 中，您只需更新 Controller 的参数并在 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>

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

谢谢