Как обрабатывать несколько кнопок отправки в форме с помощью Angular JS?

Я использую AngularJS, и у меня есть форма, в которой пользователь может вводить данные. В конце формы я хочу иметь две кнопки, одну для "сохранения", которая сохранит и перейдет на другую страницу, а еще одна кнопка с надписью "сохранить и добавить другую", которая сохранит форму, а затем reset it - позволяет чтобы ввести другую запись.

Как это сделать в 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>

И в контроллере SomeController

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

Ответы

Ответ 1

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

Вы можете сохранить как 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>

Таким образом, этот подход позволяет избежать добавления метода и вызова избыточного кода.

Спасибо

Ответ 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();
    }
}

Ответ 4

Как я вижу, у вас есть два варианта: 1: Используйте событие ngClick на кнопке "Сохранить и добавить еще" и удалите часть "type = 'submit'. Затем в любой функции, которую вы вызываете gor ngClick, вы можете сохранить, а затем reset значения, вызвав save() внутри этой функции. 2: полностью удалите ngSubmit и просто используйте ngClicks для обеих кнопок.

Ответ 5

ng-submit имеет и другие преимущества. Например, недопустимая форма не будет отправлена. Всегда лучше использовать ng-submit вместо ng-click. Однако в вашем сценарии лучший подход будет

используйте кнопки ng-click.
проверить форму в контроллере. Имейте в виду, что ng-click представит форму, даже если она недействительна.
вызов двух разных $scope.functions на двух разных ng-click в somecontroller.

Надеюсь, это поможет.