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

من قبل: جيمس هارتمان جيمس هارتمان
Hours تحديث

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

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

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

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

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

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

أرسل نموذجًا في 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>

Code التفسير:

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

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

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

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

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

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

ملخص

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

تلخيص هذه التدوينة بـ: