JS angolari - pulsante sul Modulo di sopprimere presentazione

Annulla consideri un modulo con tre pulsanti:JS angolari - pulsante sul Modulo di sopprimere presentazione

<form ng-submit="updateUser()"> 
    <div>Name <input type="text" ng-model="userToEdit.name" /></div> 
    <div> 
    <button class="btn btn-primary" ng-click="updateUser()">Save</button> 
    <button class="btn" ng-click="cancelEdit()">Cancel</button> 
    <button class="btn btn-danger" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</button> 
    </div> 
</form>

Quando fa clic su Annulla, CancelEdit() viene chiamato, quindi UpdateUser() viene chiamato. Non voglio che venga chiamato il metodo updateUser(). C'è un modo per sopprimere l'invio di questo modulo (preferibilmente wQuery jQuery?)

Nota: Mi piacerebbe ancora essere in grado di premere invio e impostazione predefinita per l'azione Salva.

fonte

2013-04-16 Dave

Puoi provare a definire un pulsante con il type = "submit" e vedere se la presentazione viene attivato solo quando questo fa clic sul pulsante? – jpmorin

Ho rimosso ng-submit e aggiunto type = "submit" al pulsante Salva, e premendo invio mentre si concentrava sulla casella di testo non ho inviato il mio modulo. – Dave

Se si specifica type = "submit" su un pulsante è necessario avere la direttiva ng-submit nel modulo e non è necessario il ng-clic sul pulsante di invio. – jpmorin

C'è un attributo type per la <button> quali default inviare - vedere this spec. Pertanto, ogni pulsante nel modulo è un pulsante invia. È necessario specificare il tasto tipo per i pulsanti che non dovrebbe far scattare l'invio del modulo, in questo modo:

<form ng-submit="updateUser()"> 
    <div>Name <input type="text" ng-model="userToEdit.name" /></div> 
    <div> 
    <button class="btn btn-primary">Save</button> 
    <button type="button" class="btn" ng-click="cancelEdit()">Cancel</button> 
    <button type="button" class="btn btn-danger" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</button> 
    </div> 
</form>

E anche senza bisogno di mettere l'azione submit sia ng-click e ng-submit - si innescherà doppia Sottoscrivi. Vorrei consigliare di utilizzare ng-submit perché cattura tutti i modi di invio dei moduli, come premere INVIO e non solo fare clic sul pulsante di invio.

Spero che questo aiuti :)

fonte

2013-07-14 08:21:26

Anzi, ben detto. – finishingmove

Questa è la migliore risposta! – Gabriel

Sei azzeccato con questa linea: 'C'è un attributo di tipo per il

Prova questa

<form ng-submit="updateUser()"> 
    <div>Name <input type="text" ng-model="userToEdit.name" /></div> 
    <div> 
    <button class="btn btn-primary">Save</button> 
    <a class="btn" ng-click="cancelEdit()">Cancel</a> 
    <a class="btn btn-danger" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</a> 
    </div> 
</form>

o questo

<form> 
    <div>Name <input type="text" ng-model="userToEdit.name" /></div> 
    <div> 
    <button class="btn btn-primary" ng-click="updateUser()">Save</button> 
    <button class="btn" ng-click="cancelEdit()">Cancel</button> 
    <button class="btn btn-danger" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</button> 
    </div> 
</form>

in ultima analisi, non credo che avete bisogno di updateUser() due volte in html

fonte

2013-04-16 04:22:08 Fresheyeball

Grazie, funziona (accetto una volta che SO mi consente). La prima soluzione mi consente di premere Invio mentre nell'area di testo, quindi è quella che preferisco. – Dave

Vedere la risposta di Shimon Rachlenko per un modo per continuare a usare i tag '

È possibile utilizzare per annullare tipo di pulsante = "reset":

<button type="reset" class="btn" ng-click="cancelEdit()">Cancel</button>

il pulsante è un pulsante di reset (azzera i form-data ai suoi valori iniziali)

http://www.w3schools.com/tags/att_button_type.asp

fonte

2015-09-23 09:30:30 zxxc

questo azzera di nuovo a vuoto, non indietro a quello che era in origine – silkcom

Questo non reimposta a tutti, –

Questo non lo fa funziona perché cancella tutti i dati del modulo in modo che al successivo caricamento del modulo per modificare le informazioni tutti i campi siano vuoti. Meglio usare la soluzione 'type =" button "'. – mikeym

stavo avendo sam Problema. Ho usato l'ancora al posto del pulsante.

<form ng-submit="updateUser()"> 
    <div>Name <input type="text" ng-model="userToEdit.name" /></div> 
    <div> 
    <button class="btn btn-primary" ng-click="updateUser()">Save</button> 
<a class="btn btn-danger" ng-click="cancelEdit()" role="button">Cancel</a> 
    <button class="btn btn-primary" ng-click="deleteUser(userToEdit)"><i class="icon-trash"></i> Delete</button> 

    </div> 
</form>

fonte

2016-09-28 06:19:53

JS angolari - pulsante sul Modulo di sopprimere presentazione

risposta

Problemi correlati