דוגמה לשלוח טופס AngularJS [שלח]

הזן איזה נושא אתה רוצה ללמוד
  • {{topicname}}
var sampleApp = angular.module ('sampleApp', []); sampleApp.controller ('AngularController', function ($ scope) {$ scope.AllTopic = []; $ scope.Display = function () {$ scope.AllTopic.push ($ scope.Topic);}});

הסבר קוד:

  1. אנו מכריזים תחילה על תג HTML הטופס שלנו, שיכיל את הפקד 'תיבת טקסט' ולחצן 'שלח' כפי שמוצג בדוגמא שלח שלוח AngularJS. לאחר מכן אנו משתמשים בהנחיית ה- ngsubmit Angular כדי לקשור את הפונקציה 'Display ()' לצורה שלנו. פונקציה זו תוגדר בבקר שלנו ותיקרא בעת הגשת הטופס.
  2. יש לנו פקד טקסט שבו המשתמש יזין את הנושא שהוא רוצה ללמוד. זה יהיה קשור למשתנה שנקרא 'נושא' שישמש בבקר שלנו.
  3. יש את כפתור השליחה הרגיל עליו לוחץ המשתמש כאשר הוא נכנס לנושא שהוא רוצה.
  4. השתמשנו בהנחיה ng-repeat כדי להציג פריטי רשימה של הנושאים שהמשתמש מזין. ההנחיה ng-repeat עוברת על כל נושא במערך 'AllTopic' ומציגה את שם הנושא בהתאם.
  5. בבקר שלנו, אנו מכריזים על משתנה מערך בשם 'AllTopic'. זה ישמש להחזיק את כל הנושאים שהזין המשתמש בשלב 2.
  6. אנו מגדירים את הקוד לפונקציית Display () שלנו שנקרא בכל פעם שהמשתמש לוחץ על כפתור Submit. כאן אנו משתמשים בפונקציית מערך הפוש כדי להוסיף את הנושאים שהמשתמש הזן באמצעות המשתנה 'נושא' לתוך המערך 'AllTopic'.

אם הקוד מבוצע בהצלחה, הפלט הבא יוצג בעת הפעלת הקוד בדפדפן.

תְפוּקָה:

כדי לראות את הקוד פועל, ראשית, הזן שם נושא כמו 'זוויתי' כפי שמוצג למעלה בתיבת הטקסט ולאחר מכן לחץ על כפתור שלח.

  • לאחר לחיצה על כפתור השליחה, תראה את הפריט שהוזן בתיבת הטקסט נוסף לרשימת הפריטים.
  • זה מושג על ידי פונקציית Display (), הנקראת כאשר לוחצים על כפתור השליחה.
  • הפונקציה Display () מוסיפה את הטקסט למשתנה המערך הנקרא 'AllTopic'. והנחיית ה- ng-repeat שלנו עוברת על כל ערך במשתנה המערך 'AllTopic' ומציגה אותם כפריטי רשימה בהתאם.

סיכום

  • ההנחיה 'ng-submit' משמשת לעיבוד הקלט שהוזן על ידי המשתמש לטופס שליחה ב- AngularJS.
  • תהליכי שליחת המידע בדף אינטרנט מטופלים בדרך כלל על ידי אירוע השליחה בדפדפן האינטרנט.
  • מסירת המידע יכולה להתבצע באמצעות בקשת GET או POST.
  • הפונקציה Display () מוסיפה את הטקסט למשתנה המערך הנקרא 'AllTopic'.