AngularJS ng-submit with Form Submit Example
Τζέιμς Χάρτμαν
Οδηγία AngularJS ng-submit
The ng-υποβολή οδηγία στο AngularJS χρησιμοποιείται για τη σύνδεση της εφαρμογής στο συμβάν υποβολής του προγράμματος περιήγησης. Έτσι στην περίπτωση του AngularJS στο συμβάν υποβολής, μπορείτε να πραγματοποιήσετε κάποια επεξεργασία στον ίδιο τον ελεγκτή και στη συνέχεια να εμφανίσετε τις επεξεργασμένες πληροφορίες στον χρήστη.
Πώς να υποβάλετε μια φόρμα στο AngularJS χρησιμοποιώντας το ng-submit
Οι διαδικασίες υποβολής πληροφοριών σε μια ιστοσελίδα συνήθως αντιμετωπίζονται από το συμβάν υποβολής στο πρόγραμμα περιήγησης Ιστού. Αυτό το συμβάν χρησιμοποιείται συνήθως για την αποστολή πληροφοριών που ο χρήστης ενδέχεται να έχει εισαγάγει σε μια ιστοσελίδα στον διακομιστή για περαιτέρω επεξεργασία, όπως διαπιστευτήρια σύνδεσης, δεδομένα φόρμας κ.λπ. Η υποβολή των πληροφοριών μπορεί να γίνει μέσω αιτήματος GET ή POST.
Ας πάρουμε ένα παράδειγμα υποβολής φόρμας Angular για να δούμε πώς μπορείτε να υποβάλετε φόρμες στο AngularJS.
Στο παράδειγμα υποβολής της φόρμας AngularJS, θα παρουσιάσουμε ένα πλαίσιο κειμένου στον χρήστη στο οποίο μπορεί να εισαγάγει το θέμα που θέλει να μάθει. Θα υπάρχει ένα κουμπί υποβολής στη σελίδα, το οποίο όταν πατηθεί θα προσθέσει το θέμα σε μια μη ταξινομημένη λίστα.
Παράδειγμα υποβολής φόρμας AngularJS
Τώρα, θα δούμε ένα παράδειγμα υποβολής φόρμας AngularJS από τον Ελεγκτή χρησιμοποιώντας την οδηγία ng-submit:
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">
<form ng-submit="Display()">
Enter which topic you would like to learn
<input type="text" ng-app="sampleApp" ng-model="Topic"><br>
<input type="submit" value="Submit"/>
<ul ng-repeat="topicname in AllTopic">
<li>{{topicname}}</li>
</ul>
</form>
</div>
<script>
var sampleApp = angular.module("sampleApp",[]);
sampleApp.controller("AngularController",function($scope) {
$scope.AllTopic=[];
$scope.Display = function () {
$scope.AllTopic.push($scope.Topic);
}
});
</script>
</body>
</html>
Επεξήγηση κώδικα:
- Πρώτα δηλώνουμε την ετικέτα HTML της φόρμας μας, η οποία θα κρατά το στοιχείο ελέγχου "πλαίσιο κειμένου" και "κουμπί υποβολής", όπως φαίνεται στο παράδειγμα συμβάντος υποβολής φόρμας Angular. Στη συνέχεια, χρησιμοποιούμε την οδηγία ngsubmit Angular για να συνδέσουμε τη συνάρτηση "Display()" στη φόρμα μας. Αυτή η συνάρτηση θα οριστεί στον ελεγκτή μας και θα κληθεί όταν υποβληθεί η φόρμα.
- Έχουμε ένα στοιχείο ελέγχου κειμένου στο οποίο ο χρήστης θα εισάγει το Θέμα που θέλει να μάθει. Αυτό θα δεσμευτεί σε μια μεταβλητή που ονομάζεται "Θέμα" που θα χρησιμοποιηθεί στον ελεγκτή μας.
- Υπάρχει το κανονικό κουμπί υποβολής στο AngularJS στο οποίο θα κάνει κλικ ο χρήστης όταν εισάγει το θέμα που θέλει.
- Χρησιμοποιήσαμε το ng-επανάληψη οδηγία για την εμφάνιση στοιχείων λίστας των θεμάτων που εισάγει ο χρήστης. Η οδηγία ng-repeat περνά από κάθε θέμα στον πίνακα "AllTopic" και εμφανίζει το όνομα του θέματος ανάλογα.
- Στον ελεγκτή μας, δηλώνουμε μια μεταβλητή πίνακα που ονομάζεται "AllTopic". Αυτό θα χρησιμοποιηθεί για να κρατήσει όλα τα θέματα που εισήγαγε ο χρήστης στο Βήμα 2.
- Καθορίζουμε τον κώδικα για τη συνάρτηση Display() που θα καλείται κάθε φορά που ο χρήστης κάνει κλικ στο κουμπί Υποβολή. Εδώ χρησιμοποιούμε τη συνάρτηση πίνακα ώθησης για να προσθέσουμε τα Θέματα που εισάγει ο χρήστης μέσω της μεταβλητής 'Θέμα' στον πίνακα μας 'AllTopic'.
Εάν ο κώδικας του παραδείγματος φόρμας AngularJS εκτελεστεί με επιτυχία, θα εμφανιστεί η ακόλουθη Έξοδος όταν εκτελείτε τον κώδικά σας στο πρόγραμμα περιήγησης.
Παραγωγή:
Για να δείτε τον κώδικα να λειτουργεί, πρώτα εισαγάγετε ένα όνομα θέματος όπως "Angular" όπως φαίνεται παραπάνω στο πλαίσιο κειμένου και, στη συνέχεια, κάντε κλικ στο κουμπί Υποβολή.
- Αφού κάνετε κλικ στο κουμπί υποβολής, θα δείτε το στοιχείο που εισήχθη στο πλαίσιο κειμένου προστέθηκε στη λίστα των στοιχείων.
- Αυτό επιτυγχάνεται με τη συνάρτηση Display(), η οποία καλείται όταν πατηθεί το κουμπί υποβολής.
- Η συνάρτηση Display() προσθέτει το κείμενο στη μεταβλητή του πίνακα που ονομάζεται "AllTopic". Και η οδηγία ng-repeat περνά από κάθε τιμή στη μεταβλητή του πίνακα 'AllTopic' και τις εμφανίζει ως στοιχεία λίστας ανάλογα.
Περίληψη
- Η οδηγία "ng-submit" χρησιμοποιείται για την επεξεργασία των εισαγωγών που εισάγει ο χρήστης για υποβολή φόρμας στο AngularJS.
- Οι διαδικασίες υποβολής πληροφοριών σε μια ιστοσελίδα συνήθως αντιμετωπίζονται από το συμβάν υποβολής στο πρόγραμμα περιήγησης Ιστού.
- Η υποβολή των πληροφοριών μπορεί να γίνει μέσω αιτήματος GET ή POST.
- Η συνάρτηση Display() προσθέτει το κείμενο στη μεταβλητή του πίνακα που ονομάζεται "AllTopic".