Question

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

如何以角度完成此操作？我想我可以有两个带有ng-click标签的提交按钮，但是我在表单元素上使用了ng-submit。有什么理由我需要使用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">Save and Add Another</button>
    </form>
</div>

在控制器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中，您只需更新控制器的参数并在事件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>

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

由于

Answer 2

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>

Answer 3

将它们全部设为按钮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>

所以，在你的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();
    }
}

Answer 4

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

Answer 5

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

使用ng-click按钮。
验证控制器中的表单。请记住，即使无效，ng-click也会提交表单。
在somecontroller中的两个不同的ng-click上调用两个不同的$ scope.functions。

希望它有所帮助。

Answer 6

从“表单”元素中删除ng-submit，并在每个按钮上分别以“ submit”类型定义ng-click函数。要进行无效检查，请在表单元素标签中定义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.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
    });
  }
}

Answer 7

如果某人正在寻找一种简单的方法，则只需创建一个标志并在按钮和提交之间切换即可。

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

需要根据用户操作来处理该标志。

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

7 个答案: