AngularJS ng-click، ng-show & ng-hide التوجيهات مع مثال

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

أحداث AngularJS

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

عند إنشاء تطبيقات تعتمد على الويب، سيحتاج تطبيقك عاجلاً أم آجلاً إلى التعامل مع أحداث DOM مثل نقرات الماوس، والتحركات، وضغطات لوحة المفاتيح، وأحداث التغيير، وما إلى ذلك.

AngularJS يمكن إضافة وظائف يمكن استخدامها للتعامل مع مثل هذه الأحداث.

على سبيل المثال، إذا كان هناك زر على الصفحة وتريد معالجة شيء ما عند النقر فوق الزر، فيمكننا استخدام توجيه الحدث Angular ng-click.

سننظر في توجيهات الحدث بالتفصيل خلال هذه الدورة.

ما هو التوجيه ng-click في AngularJS؟

استخدم "توجيه النقر فوق ng" يتم استخدام AngularJS لتطبيق سلوك مخصص عند النقر فوق عنصر في HTML. يُستخدم هذا التوجيه عادةً للأزرار لأنه الأكثر شيوعًا لإضافة الأحداث التي تستجيب للنقرات التي يقوم بها المستخدم. يتم استخدامه أيضًا لإصدار تنبيهات منبثقة عند النقر فوق الزر.

بناء جملة النقر ng في AngularJS

<element
 ng-click="expression">
</element>

دعونا نلقي نظرة على مثال بسيط لكيفية تنفيذ حدث النقر.

مثال على النقر على ng في AngularJS

في هذا المثال، سيكون لدينا متغير عداد والذي ستزداد قيمته عندما ينقر المستخدم على زر.

نانوغرام انقر فوق التوجيه في AngularJS
مثال على النقر ng في AngularJS
<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body ng-app="">

<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>

<button ng-click="count = count + 1" ng-init="count=0">
    Increment
</button>

<div>The Current Count is {{count}}</div>

</body>
</html>

Code التفسير:

  1. نحن نستخدم أولاً التوجيه ng-init لتعيين قيمة عدد المتغيرات المحلية على 0.
  2. نقوم بعد ذلك بإدخال توجيه الحدث ng-click إلى الزر. في هذا التوجيه، نقوم بكتابة تعليمات برمجية لزيادة قيمة متغير العدد بمقدار 1.
  3. نحن هنا نعرض قيمة متغير العدد للمستخدم.

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

الإخراج:

نانوغرام انقر في AngularJS

من الناتج أعلاه،

  • يمكننا أن نرى أن زر "زيادة" معروض وأن قيمة متغير العد هي صفر في البداية.
  • عند النقر فوق زر "الزيادة"، تتم زيادة قيمة العدد وفقًا لذلك كما هو موضح في الصورة الناتجة أدناه.

نانوغرام انقر في AngularJS

ذات المواد

ما هو توجيه ng-show في AngularJS؟

استخدم نانوغرام-إظهار التوجيه في AngularJS يستخدم لإظهار أو إخفاء ملف معين HTML عنصر يعتمد على التعبير المقدم للسمة ng-show. في الخلفية، يتم إظهار عنصر HTML أو إخفاؤه عن طريق إزالة أو إضافة فئة .ng-hide CSS إلى العنصر. إنها فئة CSS محددة مسبقًا والتي تحدد العرض على لا شيء.

بناء جملة ng-show في AngularJS

<element
 ng-show="expression">
</element>

في الخلفية، يتم إظهار العنصر أو إخفاؤه عن طريق إزالة أو إضافة فئة .ng-hide CSS إلى العنصر.

مثال على ng-show في AngularJS

دعونا نلقي نظرة على ng-show في Angular مثال لكيفية استخدام توجيه "ngshow events" لعرض عنصر مخفي.

ng-show التوجيه في AngularJS

مثال على عرض ng في Angular
<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    <input type="button" value="Show Angular" ng-click="ShowHide()"/>

    <br><br><div ng-show = "IsVisible">Angular</div>
</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope){
        $scope.IsVisible = false;

        $scope.ShowHide = function(){
            $scope.IsVisible = true;
        }
        });
</script>

</body>
</html>

Code التفسير:

  1. نقوم بإرفاق توجيه الحدث ng-click بعنصر الزر. نحن هنا نشير إلى وظيفة تسمى "ShowHide" والتي تم تعريفها في وحدة التحكم لدينا - DemoController.
  2. نقوم بإرفاق السمة ng-show بعلامة div التي تحتوي على النص Angular. هذه هي العلامة التي سنقوم بإظهارها/إخفاءها بناءً على سمة ng-show.
  3. في وحدة التحكم، نقوم بربط متغير العضو "IsVisible" بكائن النطاق. سيتم تمرير هذه الخاصية إلى الخاصية angular ng-show (الخطوة رقم 2) للتحكم في رؤية عنصر التحكم div. نقوم في البداية بتعيين هذا على false بحيث يتم إخفاء علامة div عند عرض الصفحة لأول مرة. ملاحظة:- عند تعيين السمات ng-show على true، سيتم عرض عنصر التحكم اللاحق، وهو في حالتنا علامة div، للمستخدم. عند تعيين السمة ng-show على false، سيتم إخفاء عنصر التحكم عن المستخدم.
  4. نحن نضيف رمزًا إلى وظيفة ShowHide التي ستقوم بتعيين متغير العضو IsVisible على القيمة true بحيث يمكن عرض AngularJS show إخفاء div عند علامة النقر للمستخدم.

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

الإخراج: 1

ng-show التوجيه في AngularJS

من الإخراج،

  • يمكنك في البداية أن ترى أن علامة div التي تحتوي على النص "AngularJS" غير معروضة وذلك لأن كائن النطاق isVisible تم تعيينه في البداية على false والذي يتم بعد ذلك تمريره إلى التوجيه ng-show الخاص بعلامة div.
  • عند النقر فوق الزر "إظهار AngularJS"، فإنه يغير متغير العضو isVisible ليصبح صحيحًا وبالتالي يصبح النص "Angular" مرئيًا للمستخدم. سيتم عرض الإخراج أدناه للمستخدم.

ng-show التوجيه في AngularJS

يعرض الإخراج الآن علامة div مع النص Angular.

ما هو توجيه ng-hide في AngularJS؟

استخدم نانوغرام إخفاء التوجيه في AngularJS هي دالة سيتم من خلالها إخفاء العنصر إذا كان التعبير TRUE. إذا كان التعبير FALSE، فسيتم عرض العنصر. في الخلفية، يتم إظهار العنصر أو إخفاؤه عن طريق إزالة أو إضافة فئة .ng-hide CSS إلى العنصر.

بناء جملة ng-hide في AngularJS

<element
 ng-hide="expression">
</element>

من ناحية أخرى مع ng-hide، يتم إخفاء العنصر إذا كان التعبير صحيحًا وسيتم إظهاره إذا كان خطأ.

مثال على ng-hide في AngularJS

دعونا نلقي نظرة على مثال ng-hide المشابه للمثال الموضح في ngShow لعرض كيفية استخدام سمات ng-hide وng-show.

ng-hide التوجيه في AngularJS

مثال على ng-hide في AngularJS
<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    <input type="button" value="Hide Angular" ng-click="ShowHide()"/>

    <br><br><div ng-hide="IsVisible">Angular</div>
</div>

<script type="text/javascript">

    var app = angular.module('DemoApp',[]);

    app.controller('DemoController',function($scope){
        $scope.IsVisible = false;

        $scope.ShowHide = function(){
            $scope.IsVisible = $scope.IsVisible = true;
        }
        });
</script>

</body>
</html>

Code التفسير:

  1. نقوم بإرفاق توجيه الحدث ng-click بعنصر الزر. نحن هنا نشير إلى وظيفة تسمى ShowHide والتي تم تعريفها في وحدة التحكم لدينا – DemoController.
  2. نقوم بإرفاق السمة ng-hide بعلامة div التي تحتوي على النص Angular. هذه هي العلامة التي سنستخدمها لإظهار الإخفاء في Angular استنادًا إلى سمة ng-show.
  3. في وحدة التحكم، نقوم بربط متغير العضو isVisible بكائن النطاق. سيتم تمرير هذه الخاصية إلى الخاصية ng-show angular للتحكم في رؤية عنصر التحكم div. نقوم في البداية بتعيين هذا على false بحيث يتم إخفاء علامة div عند عرض الصفحة لأول مرة.
  4. نقوم بإضافة تعليمات برمجية إلى وظيفة ShowHide والتي ستقوم بتعيين متغير العضو IsVisible على القيمة true بحيث يمكن عرض علامة div للمستخدم.

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

الإخراج:

ng-hide التوجيه في AngularJS

من الإخراج،

  • يمكنك في البداية أن ترى أن علامة div التي تحتوي على النص "AngularJs" تظهر في البداية لأن قيمة الخاصية false يتم إرسالها إلى التوجيه ng-hide.
  • عندما نضغط على زر "Hide Angular"، سيتم إرسال قيمة الخاصية true إلى التوجيه ng-hide. ومن ثم سيتم عرض الإخراج أدناه، حيث سيتم إخفاء كلمة "Angular".

ng-hide التوجيه في AngularJS

توجيهات مستمع الأحداث AngularJS

يمكنك إضافة مستمعي الأحداث AngularJS إلى عناصر HTML الخاصة بك باستخدام واحد أو أكثر من هذه العناصر توجيهات:

  • نانوغرام-طمس
  • نانوغرام التغيير
  • نانوغرام انقر
  • نانوغرام نسخة
  • قطع نانوغرام
  • ng-dblclick
  • نانوغرام التركيز
  • ng-keydown
  • ng-الضغط على المفاتيح
  • ng-keyup
  • ng-mousedown
  • ng-mouseenter
  • ng-mouseleave
  • ng-mousemove
  • ng-mouseover
  • ng-mouseup
  • لصق نانوغرام

ملخص

  • تُستخدم توجيهات الأحداث في Angular لإضافة تعليمات برمجية مخصصة للرد على الأحداث التي تم إنشاؤها بواسطة تدخل المستخدم مثل النقرات على الأزرار ونقرات لوحة المفاتيح والماوس وما إلى ذلك.
  • توجيه الحدث الأكثر شيوعًا هو توجيه AngularJS ng-click والذي يُستخدم للتعامل مع أحداث النقر. الاستخدام الأكثر شيوعًا لهذا هو النقر على أزرار AngluarJS حيث يمكن إضافة رمز للرد على نقرة زر.
  • يمكن أيضًا إخفاء عناصر HTML أو إظهارها للمستخدم وفقًا لذلك باستخدام AngularJS ng-show التوجيه، الزاوي ng-hide التوجيه والسمات ng-visible.

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