Come gestire più pulsanti di invio in un modulo utilizzando Angular JS?

Question

Sto usando AngularJS e ho un modulo in cui l'utente può inserire i dati. Alla fine del modulo voglio avere due pulsanti, uno per "salvare" che salverà e andare su un'altra pagina, e un altro pulsante con l'etichetta "salva e aggiungi un altro" che salverà il modulo e poi lo ripristinerà - permettendo loro di inserisci un'altra voce.

Come ottengo ciò in modo angolare? Stavo pensando che potrei avere due pulsanti di invio con i tag ng-click, ma sto usando ng-submit sull'elemento del modulo. C'è qualche ragione per cui ho bisogno di usare ng-submit - Non riesco a ricordare perché ho iniziato a usare quello invece di ng-clic sul pulsante.

Il codice sembra qualcosa di simile:

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

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

ngSubmit consente di premere durante la digitazione nella casella di testo da inviare. Se questo comportamento non è importante, basta usare 2 ngClick. Se è importante, è possibile modificare il secondo pulsante per utilizzare ngClick. Così il codice diventa:

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

come la vedo io, si hanno due opzioni: 1: Utilizzare un evento ngClick sul "Salva e aggiungi un altro "pulsante e rimuovi la porzione" type = 'submit' ". Quindi, in qualunque funzione tu chiami per ngClick, puoi salvare e quindi resettare i valori, chiamando save() all'interno di quella funzione. 2: Rimuovi ngSubmit completamente e usa solo ngClicks per entrambi i pulsanti.

Answer 3

È possibile mantenere entrambi ng-click e type="submit". Nella ng-click si può semplicemente aggiornare un parametro del controller e convalidare che in caso 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> 

Quindi, questo approccio si evita di aggiungere un metodo e quindi chiamando un codice ridondante.

Grazie

Answer 4

ng-submit ha anche altri vantaggi. Ad esempio, il modulo non valido non verrà inviato. È sempre meglio usare ng-submit invece di ng-click. Tuttavia, nel tuo scenario, un approccio migliore sarebbe

1. utilizzare ng-clic sui pulsanti.
2. modulo di convalida nel controller. Tieni presente che ng-clic invierà il modulo anche se non è valido.
3. chiama due differenti $ scope.functions su due diversi ng-clic nel controller.

Spero che sia d'aiuto.

Answer 5

Fare tutti i pulsanti e type=submit. Rende un po 'più pulito non mescolando e abbinando input e pulsanti. Quindi in pratica stai provando ad eseguire un metodo nel tuo controller per gestire entrambi i clic sui pulsanti.

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

Quindi, nel file js avrete qualcosa di simile.

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(); 
    } 
}