AngularJS ng-submit مع مثال إرسال النموذج

AngularJS ng-إرسال التوجيه

نانوغرام-إرسال يتم استخدام التوجيه في AngularJS لربط التطبيق بحدث الإرسال الخاص بالمتصفح. لذلك في حالة AngularJS في حدث الإرسال، يمكنك إجراء بعض المعالجة داخل وحدة التحكم نفسها ثم عرض المعلومات المعالجة للمستخدم.

كيفية إرسال نموذج في AngularJS باستخدام ng-submit

عادةً ما تتم معالجة عمليات إرسال المعلومات على صفحة الويب من خلال حدث الإرسال على متصفح الويب. يُستخدم هذا الحدث عادةً لإرسال المعلومات التي ربما يكون المستخدم قد أدخلها على صفحة ويب إلى الخادم لمزيد من المعالجة مثل بيانات اعتماد تسجيل الدخول وبيانات النموذج وما إلى ذلك. ويمكن إرسال المعلومات من خلال طلب GET أو POST.

لنأخذ مثالًا على إرسال نموذج Angular لمعرفة كيفية إرسال النماذج في AngularJS.

في مثال إرسال نموذج AngularJS الخاص بنا، سنقدم نصًاbox للمستخدم حيث يمكنهم إدخال الموضوع الذي يريدون تعلمه. سيكون هناك زر إرسال على الصفحة، والذي عند الضغط عليه سيضيف الموضوع إلى قائمة غير مرتبة.

أرسل نموذجًا في AngularJS باستخدام ng-submit
إرسال نموذج في AngularJS باستخدام ng-submit

نموذج إرسال 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()">
        &nbsp;&nbsp;&nbsp;
        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>

شرح الكود:

  1. نحن نعلن أولاً عن علامة HTML الخاصة بالنموذج، والتي ستحتوي على النص "text box"و"زر الإرسال" كما هو موضح في مثال حدث إرسال النموذج Angular. نستخدم بعد ذلك التوجيه ngsubmit Angular لربط الدالة "Display()" بالنموذج الخاص بنا. سيتم تعريف هذه الوظيفة في وحدة التحكم الخاصة بنا وسيتم استدعاؤها عند إرسال النموذج.
  2. لدينا عنصر تحكم في النص حيث يقوم المستخدم بإدخال الموضوع الذي يريد تعلمه. سيتم ربط هذا بمتغير يسمى "الموضوع" والذي سيتم استخدامه في وحدة التحكم الخاصة بنا.
  3. يوجد زر إرسال عادي في AngularJS والذي سينقر عليه المستخدم عندما يدخل الموضوع الذي يريده.
  4. لقد استخدمنا نانوغرام تكرار التوجيه لعرض عناصر القائمة للموضوعات التي يدخلها المستخدم. يمر التوجيه ng-repeat عبر كل موضوع في المصفوفة "AllTopic" ويعرض اسم الموضوع وفقًا لذلك.
  5. في وحدة التحكم لدينا، نعلن عن متغير مصفوفة يسمى "AllTopic". سيتم استخدام هذا للاحتفاظ بجميع المواضيع التي أدخلها المستخدم في الخطوة 2.
  6. نحن نقوم بتحديد الكود الخاص بوظيفة Display() الخاصة بنا والتي سيتم استدعاؤها عندما ينقر المستخدم على زر الإرسال. نحن هنا نستخدم وظيفة مصفوفة الدفع لإضافة المواضيع التي أدخلها المستخدم عبر المتغير "Topic" إلى مصفوفتنا "AllTopic".

إذا تم تنفيذ التعليمات البرمجية لنموذج AngularJS بنجاح، فسيتم حذف following سيتم عرض الإخراج عند تشغيل التعليمات البرمجية الخاصة بك في المتصفح.
الإخراج:

إرسال نموذج في AngularJS

لرؤية الكود يعمل، أولاً، أدخل اسم موضوع مثل "Angular" كما هو موضح أعلاه في النصbox ومن ثم انقر على زر إرسال.

إرسال نموذج في AngularJS

  • بعد النقر على زر الإرسال، سترى العنصر الذي تم إدخاله في النصbox تمت إضافتها إلى قائمة العناصر.
  • يتم تحقيق ذلك عن طريق وظيفة Display()، والتي يتم استدعاؤها عند الضغط على زر الإرسال.
  • تضيف الدالة Display() النص إلى متغير الصفيف المسمى 'AllTopic.' ويمر توجيه ng-repeat الخاص بنا عبر كل قيمة في متغير المصفوفة "AllTopic" ويعرضها كعناصر قائمة وفقًا لذلك.

نبذة عامة

  • يتم استخدام التوجيه "ng-submit" لمعالجة المدخلات التي أدخلها المستخدم لإرسال النموذج في AngularJS.
  • عادةً ما تتم معالجة عمليات إرسال المعلومات على صفحة الويب من خلال حدث الإرسال على متصفح الويب.
  • يمكن تقديم المعلومات من خلال طلب GET أو POST.
  • تضيف الدالة Display() النص إلى متغير الصفيف المسمى 'AllTopic.'