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

Я использую AngularJS, и у меня есть форма, в которой пользователь может <div ng-controller = "SomeController" > <form ng-submit = "save (record)" > <input type = "text" name = "shoppingListItem" ng -model = "record.shoppingListItem" > <button type = "submit" > Сохранить </ button> <button type = "submit" > Сохранить и добавить еще </ button> </ form> </ div> данные. В конце формы я хочу иметь две кнопки, одну для «сохранения», которая будет сохранять и переходить на другую страницу, а другая кнопка с надписью «сохранить и добавить другую», которая сохранит форму, а затем сбросит ее, введите другую запись.

Как это сделать в угловом? Я думал, что у меня есть две кнопки отправки с тегами SomeController, но я использую $ scope . record = {}; $ scope . save = function ( запись ) { $ http . post ( '/ api / save' , запись ). успех ( функция ( данные ) { // принять действие, основанное на нажатии кнопки отправки }); } в элементе формы. Есть ли какая-то причина, по которой мне НУЖНО использовать ng-submit - я не могу вспомнить, почему я начал использовать это вместо ngSubmit на кнопке.

Код выглядит примерно так:

Enter

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

ngClick

javascript,angularjs,forms,

22

Ответов: 6

13 принят

<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>позволяет нажимать Enterво время ввода текстового поля для отправки. Если это поведение не важно, просто используйте 2 ng-click. Если это важно, вы можете изменить вторую используемую кнопку type="submit". Таким образом, ваш код становится:

ng-click
31

Вы можете сохранить оба ng-clickи ng-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();
    }
}
2

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

0

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

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

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

JavaScript, angularjs, формы,
Похожие вопросы
Яндекс.Метрика