أحداث AngularJS
AngularJS لديها توجيه الحدث HTML الخاص بها.
NG-Click Command
يحدد توجيه NG-Click حدث AngularJS Click.
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "myctrl"> <button ng click = "count = count + 1"> انقر فوق! </nutton> <p> {{count}} </p> </viv> <script> var app = Angular.Module ('myapp' ، []تأثير الجري:
0
إخفاء عناصر HTML
يتم استخدام توجيه NG-Hide لتعيين ما إذا كان جزء التطبيق مرئيًا.
NG-HIDE = "TRUE" يعين أن عنصر HTML غير مرئي.
ng-hide = "false" يعين عنصر HTML ليكون مرئيًا.
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "personctrl"> <button ng-click = "toggle ()"> إخفاء/إظهار </button> <p ng-hide = "myvar"> الاسم: <input type = text ng-model = "firstname"> <br> الاسم: <input type = text ng-model = "lastname" lastName}} </p> </viv> <script> var app = Angular.module ('myapp' ، []) ؛ app.controller ('personctrl' ، function ($ scope) {$ scope.firstname = "john" ؛ $ scope.lastname = "doe" ؛ $ scope.myvar = false =! $ SCOPE.MYVAR ؛نتائج التشغيل:
اسم:
اسم العائلة:
الاسم: جون دو
تحليل التطبيق:
الجزء الأول من PersonController يشبه فصل وحدة التحكم.
يحتوي التطبيق على خاصية افتراضية: $ scope.myvar = false ؛
يحدد التوجيه NG-Hide ما إذا كان عنصر <p> وحقل الإدخال مرئيين ، ويحدد ما إذا كان مرئيًا وفقًا لقيمة MyVar (صواب أو خطأ).
يتم استخدام وظيفة التبديل () لتبديل قيم متغير myvar (صحيح وكاذب).
ng-hide = "true" يجعل العنصر غير مرئي.
عرض عناصر HTML
يمكن استخدام توجيه NG-Show لتعيين ما إذا كان جزء من التطبيق مرئيًا.
ng-show = "false" يمكن تعيين عناصر HTML غير مرئية.
يمكن ضبط ng-show = "true" ليكون مرئيًا لعناصر HTML.
يستخدم المثال التالي توجيه NG-Show:
مثيل AngularJS
<! doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js ng-controller = "personctrl"> <button ng-click = "toggle ()"> إخفاء/إظهار </button> <p ng-show = "myvar"> name: <input type = text ng-model = "person.firstName"> <br> name: <input type = text ng-model = "person.lastname" "" + person.lastname}} </p> </viv> <script> var app = Angular.Module ('myapp' ، []) ؛ app.controller ('personctrl' ، function ($ scope) {$ scope.person = {firstname: "john" ، lastname: $ scope.myvar =! $ scope.myvar ؛نتائج التشغيل:
اسم:
اسم العائلة:
الاسم: جون دو
ما سبق هو مجموعة من معلومات حدث AngularJS. سوف نستمر في إضافته لاحقًا. للإشارة من قبل الأصدقاء المحتاجين.