Υποβολή φόρμας AngularJS με παράδειγμα (ng-submission)

Anonim

Πώς να υποβάλετε μια φόρμα χρησιμοποιώντας το ng-submission

Οι διαδικασίες υποβολής πληροφοριών σε μια ιστοσελίδα αντιμετωπίζονται συνήθως από το συμβάν υποβολής στο πρόγραμμα περιήγησης ιστού. Αυτό το συμβάν συνήθως χρησιμοποιείται για την αποστολή πληροφοριών που ενδέχεται να έχει εισαγάγει ο χρήστης σε μια ιστοσελίδα στον διακομιστή για περαιτέρω επεξεργασία, όπως διαπιστευτήρια σύνδεσης, δεδομένα φόρμας κ.λπ. Η υποβολή πληροφοριών μπορεί να γίνει μέσω αίτησης GET ή POST.

Το AngularJS παρέχει επίσης μια οδηγία που ονομάζεται ng-submission, η οποία μπορεί να χρησιμοποιηθεί για τη σύνδεση της εφαρμογής στο συμβάν υποβολής του προγράμματος περιήγησης. Έτσι, στην περίπτωση του AngularJS, στο συμβάν υποβολής μπορείτε να πραγματοποιήσετε κάποια επεξεργασία εντός του ίδιου του ελεγκτή και, στη συνέχεια, να εμφανίσετε τις επεξεργασμένες πληροφορίες στον χρήστη.

Ας πάρουμε ένα παράδειγμα για το πώς μπορούμε να το επιτύχουμε αυτό.

Στο παράδειγμά μας μετά την υποβολή,

Πρόκειται να παρουσιάσουμε ένα πλαίσιο κειμένου στον χρήστη στο οποίο μπορεί να εισαγάγει το θέμα που θέλει να μάθει. Θα υπάρχει ένα κουμπί υποβολής στη σελίδα, το οποίο όταν πατηθεί θα προσθέσει το θέμα σε μια λίστα χωρίς ταξινόμηση.

Event Registration

Guru99 Global Event


   Enter which topic you would like to learn
   

    

  • {{topicname}}
    •

Επεξήγηση κώδικα:

  1. Πρώτα δηλώνουμε την ετικέτα HTML φόρμας, η οποία θα κρατά το στοιχείο ελέγχου "πλαίσιο κειμένου" και "κουμπί υποβολής". Στη συνέχεια, χρησιμοποιούμε την οδηγία ng-submission για να συνδέσουμε τη λειτουργία "Display ()" στη φόρμα μας. Αυτή η συνάρτηση θα καθοριστεί στον ελεγκτή μας και θα κληθεί κατά την υποβολή της φόρμας.
  2. Έχουμε έναν έλεγχο κειμένου στο οποίο ο χρήστης θα εισαγάγει το Θέμα που θέλει να μάθει. Αυτό θα δεσμευτεί σε μια μεταβλητή που ονομάζεται «Topic» η οποία θα χρησιμοποιηθεί στον ελεγκτή μας.
  3. Υπάρχει το κανονικό κουμπί υποβολής στο οποίο ο χρήστης θα κάνει κλικ όταν έχει εισαγάγει το θέμα που θέλει.
  4. Χρησιμοποιήσαμε την οδηγία ng-repeat για να εμφανίσουμε στοιχεία λίστας των θεμάτων που εισάγει ο χρήστης. Η οδηγία ng-επανάληψης περνά από κάθε θέμα του πίνακα «AllTopic» και εμφανίζει το όνομα του θέματος ανάλογα.
  5. Στον ελεγκτή μας, δηλώνουμε μια μεταβλητή πίνακα που ονομάζεται «AllTopic». Αυτό θα χρησιμοποιηθεί για να κρατήσει όλα τα θέματα που εισάγει ο χρήστης στο Βήμα 2.
  6. Ορίζουμε τον κωδικό για τη λειτουργία Display () που θα καλείται κάθε φορά που ο χρήστης κάνει κλικ στο κουμπί Submit. Εδώ χρησιμοποιούμε τη συνάρτηση push array για να προσθέσουμε τα Θέματα που εισάγει ο χρήστης μέσω της μεταβλητής «Topic» στη σειρά μας «AllTopic»

Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.

Παραγωγή:

Για να δείτε τον κώδικα να λειτουργεί, εισαγάγετε πρώτα ένα όνομα θέματος όπως "AngularJS" όπως φαίνεται παραπάνω στο πλαίσιο κειμένου και, στη συνέχεια, κάντε κλικ στο κουμπί Υποβολή.

  • Αφού κάνετε κλικ στο κουμπί υποβολής, θα δείτε το στοιχείο που εισήχθη στο πλαίσιο κειμένου που προστέθηκε στη λίστα στοιχείων.
  • Αυτό επιτυγχάνεται με τη λειτουργία Display (), η οποία καλείται όταν πατηθεί το κουμπί υποβολής.
  • Η συνάρτηση Display () προσθέτει το κείμενο στη μεταβλητή πίνακα που ονομάζεται «AllTopic». Και η οδηγία ng-repeat μας περνά από κάθε τιμή στη μεταβλητή πίνακα «AllTopic» και τις εμφανίζει ως στοιχεία λίστας ανάλογα.

Περίληψη

Η οδηγία "ng-submission" χρησιμοποιείται για την επεξεργασία των εισόδων που εισάγει ο χρήστης κατά την υποβολή της φόρμας.